ExtJs Object #<error> has no method 'indexOf' - extjs

I am trying to edit a number of cells in the grid. I am able to edit all cells except one cell. All cells have same data type i.e. string. When I click on that particular cell, I get the error
Uncaught TypeError: Object #<error> has no method 'indexOf' in ext-all-dev.js
in the following block:
urlAppend : function(url, string) {
if (!Ext.isEmpty(string)) {
return url + (url.indexOf('?') === -1 ? '?' : '&') + string;
}
During debugging, I can see that the value of 'url' in the code block
shown above is set to 'true'.
It is clear from this that 'true' does not have the method 'indexOf'.
But I am unable to understand why the URL is being set as true. The console errors do not point to any of the JS files created by me. How can I find what I am doing wrong?

Related

React JSX mapping through data where sometimes a data field is missing

im looping through data
This is react.js / jsx
If I am pulling 100 items, none will show because of one being undefined. I just want it to display "0" if it is undefined, and show the size if it is there.
Error: Cannot read property size of undefined.
Example of data,
Item={
color:blue,
size:medium,
}
Item={
color:red
}
I am mapping through the data.
Im essentially doing this :
return items.map((item, i) => {
return( {item.size})
I have also tried {item.size ? "itWorks" : "0"} as a test, and I get the same error.
It is better to use object.hasOwnProperty('property') to check whether your object has a particular property or not . for your case it is:
{item.hasOwnProperty('size') ? "itWorks" : "0"}
The error is:
Error: Cannot read property size of undefined
It means item is undefined,
So you gotta check for item and item.size.
You should do,
return (
items && items.map(function(item, id){
.....}))
So the loop goes through when items array is of some length otherwise it exits

Cannot read property 'category' of null within return in reactjs

I'm getting some data from a json file and with .map putting those points on a google maps in reactjs, all fine. But some of the items in the object don't have any values and if they get called they throw a: 'TypeError: Cannot read property 'category' of null'. Shouldn't I just be able to do something like the following in the return:
{ marker.outcome_status.category && <p>Outcome: {marker.outcome_status.category} ({marker.outcome_status.date})</p> }
Since you have 2 nested levels you need to check there is marker.outcome_status as well.
{
marker.outcome_status
&& marker.outcome_status.category
&& <p>Outcome: {marker.outcome_status.category} ({marker.outcome_status.date})</p> }

How to set a DropDown List value taken from a promise with a value taken from another promise

I want to understand how to successfully set a value inside a DropDown List after it has been populated by a promise. The value to be set will be taken from another promise which will fill a form with a JSON structure.
In my particular case the incidence is as follows
The Drop-Down List is built as :
1) HTML Template (Jade)
select(name="inputUserRelationship",
ng-model="myForm.relationship",
ng-options="relationshipOption as relationshipOption.value for relationshipOption in relationships track by relationshipOption.id",
ng-init="myForm.insuredRelationship = relationships[0]")
option(value="") -- SELECT --
2) Controller:
$scope.getRelationTypes = function(){
HttpSrv.get('api/getRelationTypes/').then(function(results){
$scope.relationships = results;
}); };
The form gets filled in the Controller as follows:
$scope.getFormInformation = function(ID){
HttpSrv.get('/api/getFormInfo/' + ID).then(function(results){
if(results)
{
$scope.fillForm(results);
}
}); };
$scope.fillForm = function(filledFormData){
$scope.myForm.relationship = filledFormData.relationnshipID; };
This produces the following issues on my JS Debugging Console:
The value gets set on the model
The Drop-Down List stays on the default empty value ([0]).
When I try to change the selected option on my Drop-Down list it then produces the following JS Console Error.
TypeError: Cannot assign to read only property 'id' of 9
at setter (vendor.js:42989)
at Lexer.readIdent.token.fn.extend.assign (vendor.js:42424)
at validationErrorKey.$setViewValue (vendor.js:49629)
at vendor.js:53523
at Scope.promises.$get.Scope.$eval (vendor.js:44729)
at Scope.promises.$get.Scope.$apply (vendor.js:44827)
at HTMLSelectElement. (vendor.js:53465)
at HTMLSelectElement.jQuery.event.dispatch (vendor.js:4641)
at HTMLSelectElement.jQuery.event.add.elemData.handle (vendor.js:4309)
Any information is greatly appreciated. I have already researched & tested the $scope.apply() and $q options and neither have been successful to me even though I know they point to the right direction.
Cheers!
if your $http API call returns an json in the format:
[{"id":"1", "value":"Dropdown desc"}, {...}, {}]
You should set an object literal with the same structure to set the dropdownlist to a specific values like:
$scope.myForm.relationship = {"id":"1", "value":"Dropdown desc"};

How to log the content of a store or model using console.log

I am using ExtJS 4.1.3. I have the following statement to log the content of the store on the console (Firebug/Chrome)
console.log('Stored Record : ' + grid.getStore().getProxy().getReader().rawData);
I get the output
Stored Record : [object Object]
The content is displayed correct on a grid. What am I doing wrong?
Thanks
The problem is that you are concatenating the text 'Stored Record : ' with your object by using the plus sign +, that makes firebug try to convert the object into a string.
When firebug converts an object into a string it looks like [object Object]. Instead you should just print the object by itself:
console.log(grid.getStore().getProxy().getReader().rawData);
If want to print all the records in the store after they have been loaded this would work better:
grid.getStore().each(function(record) {
console.log(record);
});
try
console.log('Stored Record : ' , grid.getStore().getProxy().getReader().rawData);
refer : Outputting_text_to_the_console

Unable to use setTitle method when using a string concatenated with datastore data

I have the following code attached as a handler to a button:
myapp.stores.vehicleInfo.load();
myapp.toolbars.vehicleInfoToolbar.setTitle('Image 1 of ');
Which within my defined namespace loads the store and then sets the title of a toolbar - this works.
This code doesn't work:
myapp.stores.vehicleInfo.load();
myapp.toolbars.vehicleInfoToolbar.setTitle('Image 1 of' + myapp.stores.vehicleInfo.data.items[0].data.imageTotal);
giving the error: 'cannot read property of "data" of undefined'
But when I click the button a second time, it sets the title of the toolbar as expected e.g. Image 1 of 10.
What is going on here? How do I solve this? I tried using the settimeout method in case the setTitle method was being called too early before the store was finished loading. However this failed to solve the problem.
Thanks.
the store load() method is asynchronous and it usualy takes a while to load the store so ... you should set the title on the callback function when you are certain you have the data
myapp.stores.vehicleInfo.load({
callback:function(r, options, success) {
myapp.toolbars.vehicleInfoToolbar.setTitle('Image 1 of' + myapp.stores.vehicleInfo.data.items[0].data.imageTotal);
}
});
The store is not loaded yet when the setTitle is called. You should put call to setTitle into load's callback:
myapp.stores.vehicleInfo.load({callback : function(records){
myapp.toolbars.vehicleInfoToolbar.setTitle('Image 1 of' + records[0].data.imageTotal);
}});

Resources