PDA

View Full Version : Grid dropdown editor not mapping the data with the value



ppatel2
28 Jun 2013, 7:10 AM
I am trying to create a grid with the dropdown editor. I am getting the data and everything but when I open the row for editing the dropdown shows blank. It has the values but it is not mapping. I want to show the selected value in the dropdown when the row is in edit mode. Here is my code. Can anyone please tell me what am I missing here?


Ext.Loader.setConfig({ paths : {
'Ext.ux' : 'js/ext-4.2.1.883/examples/ux'
}
});


Ext.require(['Ext.util.*','Ext.form.*','Ext.data.*','Ext.grid.*','Ext.state.*']);


Ext.onReady(function(){
Ext.define('Model',{
extend: 'Ext.data.Model',
fields: [
'id','name','groupName','groupId'
]
});


var store = new Ext.data.JsonStore( {
model: 'model',
fields: [
'id','name','groupName','groupId'
],
autoLoad: false,
proxy: {
type: 'ajax',
url: 'urlToFetchData',
reader: {
type: 'json',
root: 'Results',
totalProperty: 'Count'
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

Ext.define("DDModel", {
extend: "Ext.data.Model",
fields: [
{name: "field", mapping:"field"},
{name: "value", mapping: "value"}
]
});

Ext.define('grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.grid',
store: store,
xtype: 'cell-editing',
layout:'table',
selType: 'checkboxmodel',
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 3,
sortable: true,
tdCls: 'wrapCSS',
editor: {
allowBlank: false
}
}, {
header: 'Group',
dataIndex: 'groupId',
flex: 3,
sortable: true,
tdCls: 'wrapCSS',
editor: new Ext.form.field.ComboBox({
typeAhead: true,
displayField: 'value',
valueField: 'value',
triggerAction: 'all',
store: new Ext.data.JsonStore({
model: 'DDModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'urlToFetchData',
reader: {
type: 'json',
root: 'Results',
totalProperty: 'Count'
}
}
})
})
}],
plugins: [rowEditing]
});

var tabs2 = Ext.widget('panel', {
activeTab: 0,
renderTo: Ext.getBody(),
plain: true,
items: [{
xtype: 'panel',
border: false,
items:[{xtype: 'grid' }],
}]
});
});

Data for the grid

{"Results":[ {"groupName":"None","id":1,"groupId":0,"name":"Row1"},
{"groupName":"None","id":2,"groupId":0,"name":"Row2"},
{"groupName":"None","id":3,"groupId":0,"name":"Row3"},
{"groupName":"test","id":4,"groupId":4,"name":"Row4"}
]}

Data for the dropdown

{"Results":[ {"value":0,"label":"None"},
{"value":4,"label":"test"}
]}

ppatel2
1 Jul 2013, 4:49 AM
Is there anyone who can help please. I am stuck here since 3 days.

Thanks,
Parth