PDA

View Full Version : How to use ComboBox in EditorGridPanel with Parent store?



msuresh
30 Dec 2010, 5:39 AM
Hi,
I have a situation where I need combo box inside a grid. I don't need EditorGridPanel, as I don't have option I am forced to use it.

My Json Data looks like this:


{
"totalCount":"4",
"systems" : [
{
"id" : "1",
"selection" : true,
"hostnames" : "cm1",
"selectedAsup":"2010122523460023",
"asupRange":[{"2010-12-19T00:33:08-05:00","asupId":"2010121900330080"},{"asupDate":"2010-12-12T00:31:35-05:00","asupId":"2010121200310103"},{"asupDate":"2010-12-05T00:30:23-05:00","asupId":"2010120500300095"}]
},
{
"id" : "2",
"selection" : false,
"hostnames" : "cm2",
"selectedAsup":"",
"asupRange":[{"asupDate":"2010-12-19T00:32:32-05:00","asupId":"2010121900320080"},{"asupDate":"2010-12-12T00:32:30-05:00","asupId":"2010121200320094"},{"asupDate":"2010-12-05T00:29:33-05:00","asupId":"2010120500290074"}]
}
]}


ExtJS Code:


var clvStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '/data/json/logview/systemmerge.json',
storeId: 'myStore',
root: 'systems',
idProperty: 'id',
autoLoad:true,
fields : ['id', 'selection', 'hostnames', 'selectedAsup', 'asupRange']
});
var sgrid = new Ext.grid.EditorGridPanel({
id:'sgrid',
title:'System Merge',
store: clvStore,
plugins:[checkRead],
colModel: new Ext.grid.ColumnModel({
columns:[
checkRead,
{
header:'System',
dataIndex: 'hostnames',
width: 70
},
{
header:'AsupRange',
dataIndex: 'asupRange',
//renderer: Ext.util.Format.comboRenderer(combo),
editor: new Ext.form.ComboBox({
store: new Ext.data.JsonStore({
data : 'asupRange',
fields: ['asupDate', 'asupId']
}),
mode: 'local',
valueField:'asupId',
displayField:'asupDate',
typeAhead: true,
triggerAction: 'all',
lazyRender: true
})
}]
}),
width: 600,
height: 300
});


However my Combo box is not working... I am unable to load the data. All the examples are pointing to external data or from the Array Store.

Please give me some ideas on how to resolve this problem.

Thanking you,
Suresh

Condor
30 Dec 2010, 6:13 AM
editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: new Ext.data.JsonStore({
fields: ['asupDate', 'asupId']
}),
mode: 'local',
valueField: 'asupId',
displayField: 'asupDate',
typeAhead: true,
triggerAction: 'all',
lazyRender: true
}), {
listeners: {
beforestartedit: function(editor) {
var combo = editor.field,
record = editor.record;
combo.store.loadData(record.get('asupRange'));
}
}
})

msuresh
30 Dec 2010, 7:29 AM
Works Perfectly, however I need to click three times to get the list of values in the grid. Is it the default behaviour?



//I have written my renderer function like this
comboRenderer = function(combo){
return function(value) {
var idx = combo.field.store.find(combo.field.valueField, value);
if(rec>=0){
var rec = combo.field.store.getAt(idx);
return rec.get(combo.field.displayField);
}else{
return "Select Date"
}
}
}

var combo = new Ext.grid.GridEditor(new Ext.form.ComboBox({
store: new Ext.data.JsonStore({
fields: ['asupDate', 'asupId']
}),
mode: 'local',
valueField: 'asupId',
displayField: 'asupDate',
typeAhead: true,
triggerAction: 'all',
emptyText:'Select Date',
lazyRender: true
}), {
listeners: {
beforestartedit: function(editor) {
var combo = editor.field,
record = editor.record;
combo.store.loadData(record.get('asupRange'));
}
}
});

Condor
30 Dec 2010, 7:35 AM
The comboRenderer won't work (the combobox store is only filled just before editing).

You need:

renderer: function(v, meta, r) {
var asupRange = r.get('asupRange');
for (var i = 0; i < asupRange.length; i++) {
if (v == asupRange.asupId) {
return asupRange.asupDate;
}
}
return 'Select Date';
}

ksandeepa
15 Feb 2012, 5:36 AM
I am using EXT JS 4 and the suggested solution is not working for me. I am getting an error saying Ext.grid.GridEditor() function does not exist and i am not able to move further. Please help

ksandeepa
15 Feb 2012, 5:39 AM
Let me know how to replace store in this case,
Ext.define('studentenrollment.view.availableView', {
extend:'Ext.panel.Panel',
alias:'widget.availableView',
requires:['studentenrollment.store.availableStore',
'studentenrollment.model.availableModel',
'studentenrollment.controller.enrollmentController'
],
margins:'10 10 10 10',
width:'100%',
title:false,
autoScroll : false,
layout : 'fit',
items:[
{ id:'availableview-grid',
xtype :'grid',
store: 'availableStore',
autoScroll : true,
columns: [
{
xtype:'actioncolumn',
width:90,
sortable: false,
align : 'center',
id : 'addpreferenceAction',
items: [{
icon: 'ext-4.0/resources/themes/images/default/dd/drop-add.gif', // Use a URL in the icon config
tooltip: 'Add Preference'
}]
},
{text: "Section", width : 90, sortable: true, dataIndex: 'sectionName'},
{text: "Units", width: 90, sortable: true, dataIndex: 'units'},
{
text: "Grading Basis",
width: 90,
sortable: true,
dataIndex: 'gradingBasis',
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
/*store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],*/
lazyRender: false,
listClass: 'x-combo-list-small'


}
},
{text: "Instructor", width: 90, sortable: true, dataIndex: 'instructors'}
],


columnLines: false,
dockedItems: [{
xtype: 'toolbar',


items: ['Available','->',{
text:'Submit',
tooltip:'Add a new row',
iconCls:'add',
xtype : 'button'
}, '-', {
text:'Options',
tooltip:'Set options',
iconCls:'option'
}]
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
frame: true,
title: false,
iconCls: 'icon-grid'
}
],


padding:1,
height:'100%',
id:'availableViewId'
});


As i mentioned in the earlier post I also tested the editor as mentioned in the earlier posts in the thread