PDA

View Full Version : different stor for each cellEditing in the same gridpanel



zebra
19 Jun 2012, 1:00 AM
Hi guys,
is there a way i can assign different stor for cellEditing combobox in the same column in a gridpanel??
I try to create a gridpanel that has 3 columns: brand, model, and resolution.
and user is able to change the resolution through cellEditing combobox.
however depends on brand and model, each combobox should have a different list of selection.
Im thinking just to put a different resolutionStor for each combobox when data loaded to the gridpanel.
any idea how can i do that? or other ways to achieve my goal?
thank you :D




Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [ 'brand_id','model_id', 'resolution']
});

var myStor = Ext.create('Ext.data.Store',{
storeId: 'myStor', model: 'myModel', id: 'myStor'
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 });

var grid_FormatConfig =Ext.create('Ext.grid.Panel',{
id: 'grid_formatconfig',
plugins: [cellEditing],
columns: [{
header: 'brand',
dataIndex: 'brand_id',
},{
header: 'model',
dataIndex: 'model_id'
},{
header: 'resolution'
dataIndex: 'resolution',
editor: {
xtype: 'combobox',
store: resolutionStor,
displayField : 'resolution',
valueField : 'id',
queryMode : 'local',
lazyRender: true
}
}],
store: myStor
});
}

scottmartin
23 Jun 2012, 4:04 PM
You could load all the records into 1 store and then filter the data when you open the combo.



// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

// The data store containing the list of states
var states2 = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"TN", "name":"Tennessee"},
{"abbr":"TX", "name":"Texas"}
],
listeners: {
'load': function(store, records, successful) {
states.loadData(records,true); // append records to main
}
}
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners: {
beforequery: function(queryEvent){
queryEvent.combo.store.filter('abbr','T');
}
}
});


Regards,
Scott.

zebra
26 Jun 2012, 8:36 PM
Thanks for replying! scott!
here i add the some new code in blue to my original code.
1. additional field 'store_id' to my store model, just for the filtering
2. global variable store_id for to filter the wanted items from store
3. selectionchange listener to update store_id on grid.Panel
4. beforequery listener to dynamically filter store

Everything works as desired, except when i first open the editor combobox the store is not filtered. However if you collapse it and expand it again, the store will be filtered.
Is there anything im missed out?? :s







Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [ 'brand_id','model_id', 'resolution']
});
Ext.define('resolutionStor', {
extend: 'Ext.data.Model',
fields: [ 'resolution','store_id']
});

store_id = -1;

var myStor = Ext.create('Ext.data.Store',{
storeId: 'myStor', model: 'myModel', id: 'myStor'
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 });

var grid_FormatConfig =Ext.create('Ext.grid.Panel',{
id: 'grid_formatconfig',
plugins: [cellEditing],
listeners:{
selectionchange: function(model, selected, eOpts){
Ext.getCmp('resolution_col').getEditor().store.clearFilter();
var sm = Ext.getCmp('grid_formatconfig').getSelectionModel().getSelection();
if(sm[0] !== undefined){
store_id = sm[0].data.brand_id*100+sm[0].data.model_id;
}
}
},
columns: [{
header: 'brand',
dataIndex: 'brand_id',
},{
header: 'model',
dataIndex: 'model_id'
},{
header: 'resolution',
id: 'resolution_col',
dataIndex: 'resolution',
editor: {
xtype: 'combobox',
store: resolutionStor,
displayField : 'resolution',
valueField : 'id',
queryMode : 'local',
lazyRender: true,
listeners:{
beforequery: function(queryEvent){
queryEvent.combo.store.filter('store_id',store_id);
//alert('beforequer');
}
}
}
}],
store: myStor
});
}

zebra
27 Jun 2012, 12:53 AM
i added lastQuery: '' in my combobox config and solve the problem.
thanks scott!! :)):)):))