PDA

View Full Version : ComboBox Display Edit Values Show [object, Object] in RowEditing Grid



crmcguire74
27 Aug 2012, 2:03 PM
Hello everyone-

I am using a RowEditing plugin within a data grid, implementing the MVC architecture. All is working as expected (minus some bumps with Internet Explorer), but one of the issues is with the combo box controls used within the inline editor. I have set my displayField and valueField properties within the column model as needed, but what happens is on data load, the grid displays the value, only due to the fact that I placed a renderer on the column to pull the name and display it within the column. On edit of the grid row, the Text Box shows [object, Object], rather than using the renderer, or the displayField. Any idea to have the textfield show the pre selected name property of my combobox, or the selected value when the user so chooses it?

The store/view/model can be referenced from:

http://www.sencha.com/forum/showthread.php?239690-Data-Not-Rendered-into-Grid-within-Internet-Explorer-using-ExtJS-4-MVC-Architecture&p=878568#post878568
(http://www.sencha.com/forum/showthread.php?239690-Data-Not-Rendered-into-Grid-within-Internet-Explorer-using-ExtJS-4-MVC-Architecture&p=878568#post878568)
In addition, an example combo box store used in the above reference is:



Ext.define('MyApp.store.UserTypes', {
extend: 'Ext.data.Store',
model: 'MyApp.model.UserType',
proxy: {
type: 'ajax',
url : '/servlet/DS',
extraParams: {
method: 'getUserTypes',
token: TOKEN
},
reader: {
type: 'json',
root: 'value',
successProperty: 'success'
}
}
});


Thank you in advance for any guidance on this issue.

Talk soon



(http://www.sencha.com/forum/showthread.php?239690-Data-Not-Rendered-into-Grid-within-Internet-Explorer-using-ExtJS-4-MVC-Architecture&p=878568#post878568)

tvanzoelen
27 Aug 2012, 11:47 PM
What if you try to create a new datatype for that column, for example I did for the binary type. But youre own type and configure the model with it.



Ext.data.Types.BINARY = {

convert: function(v, data) {
return v;
},


sortType: function(v) {
return v // When sorting,
},

type: 'binary'

};

Just change the convert function to your needs.

Farish
28 Aug 2012, 12:35 AM
Considering that the value field is 'id' and display field is 'name' from a store of names (store_names), this is what the grid column should look like:


{header: 'Name', dataIndex: 'name', flex:1,
editor: {
xtype:'combo',
store: store_names,
displayField: 'name',
valueField: 'id',
queryMode: 'local',
editable: false,
forceSelection: true
},
renderer: function(value){
if(value != 0 && value != "")
{
if(store_names.findRecord("id", value) != null)
return store_names.findRecord("id", value).get('name');
else
return value;
}
else
return ""; // display nothing if value is empty
}
}

this works fine for me. have you set forceSelection to false? the renderer should always return one value and not an object.

crmcguire74
28 Aug 2012, 9:42 AM
Hi there Farish-

The value coming back in the renderer is not a string unfortunately, but an object value...I can adjust the renderer though to read:



renderer: function(value) {

if (typeof value != 'undefined') {
if (value.name != null)
return value.name;
else
return "";
}
else
return "";


}


...and that will display properly the values on the initial load of the grid, but when going into RowEdit mode, the [object, Object] will then simply read as blank values (and not the true selected value). When editing or selecting a value now, the [object, Object] is finally gone, but now it simply just remains blank...almost there though.

crmcguire74
28 Aug 2012, 11:05 AM
I finally adjusted for the blanks with the below code...thank you so much for the help and guidance to get me to the solution!

The issue was that sometimes, the value was an object, and at others, it was an integer, which, from your code, I used to reference the record of the data store.



renderer: function(value) {

if (!isNaN(value)){

if (Ext.data.StoreManager.lookup('UserStati').findRecord('id', value) != null)
return Ext.data.StoreManager.lookup('UserStati').findRecord('id', value).get('name');
else
return value;

}

else if (typeof value != 'undefined') {
if (value.name != null)
return value.name;
else
return "";
}

else
return "";


}

extLearning
4 Aug 2014, 12:55 AM
Hi,

I'm having the same problem here.
->Column display is ok, because of renderer.
->displayTpl of combobox is set and working

Adapting my renderer didn't work. Still shows [Object object]. Here is my code:


{
header: 'company'
dataIndex: 'company',
renderer: function (value, metaData) {
return 'test';
if(Ext.isDefined(value)){
console.log(value.name);
return value.name;
}
return '';
},
flex: 1,
autoSizeColumn: true,
filter: {
type: 'list'
},
editor: {
xtype: 'combobox',
queryMode: 'local',
bind: {
store: '{companies}'
},
displayField: 'name',
valueField: 'id',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="active == false">',
'<div class="x-boundlist-item x-combo-grayed-out-item">{name}</div>',
'</tpl>',
'<tpl if="active == true">',
'<div class="x-boundlist-item">{name}</div>',
'</tpl>',
'</tpl>'
),
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{name}',
'</tpl>'
),
listeners: {
beforeselect: function (combo, record, index) {
return (record.data && record.data.active);
}
}
}
},

Can anybody help?