PDA

View Full Version : Grid - Combo Store - Need to autoLoad and pass params



msuresh
17 Feb 2011, 3:10 AM
Hi

I have a editor grid and combo in one of the column. The combo data needs to be loaded from an URL.
I need to pass params to the store and load the combo boxes after grid renders. Currently I am using "beforestartedit", however this works whenever I click on the cell, but not after grid loading.

Please help me.



this.colModel = new Ext.grid.ColumnModel({
columns : [eType,
{
dataIndex : 'selectedLogType',
hidden : true
}, {
header : 'System',
dataIndex : 'hostName',
width : 175
}, {
header : 'ASUP',
width : 260,
editable : true,
dataIndex : 'asupRange',
renderer : function(v, meta, r, ridx, cidx, str) {
meta.attr = 'ext:qtip="' + eMessage + '"';
var returnStr = "Select Date";
var asupRange = r.json.asupRange;
...
...
return returnStr;
},
editor : new Ext.grid.GridEditor(new Ext.form.ComboBox({
store : new Ext.data.JsonStore({
url : 'http://localhost/logview/asuprange',
autoLoad:false,
root:'asupRange',
method : 'GET',
fields : [{name: 'asupDate', mapping: 'asupDate', type: 'date', dateFormat: 'U'},
'asupId', 'asupTitle', 'hostName']
}),
tpl: '<tpl for="."><div class="search-item">' +
'<span>{asupDate:date("D M d Y, H:i T")}</span>' +
'{asupTitle}' +
'</div></tpl>',
displayField:'asupDate',
itemSelector: 'div.search-item',
editable: false,
listWidth:500,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true,
listeners : {
select : function(cmbo, record, index) {
var rowIndex = cmbo.rowIndex;
me.setSelectedLogType(record.json, rowIndex);
me.loadLogTypes();
}
}
}), {
listeners : {
//
beforestartedit : function(editor) {
var combo = editor.field, record = editor.record;
var urlParams = {
"sysId" :editor.record.json.sysId,
"sn" : editor.record.json.sn,
"refasup": me.store.reader.jsonData.refAsupDetails.asupId,
"proximateDate": me.store.reader.jsonData.refAsupDetails.asupDate
};
combo.store.load({"params":urlParams});
combo.rowIndex = editor.row;
},
single:true
}
})
}]
});


Regards,
Suresh

ShatyUT
17 Feb 2011, 6:45 AM
Try the viewready event. I've found that is called when the grid has finished rendering and is completely displayed on the screen. If you set a mask on your grid then the grid will get masked with a message to the user that the grid is loading.

hope that is what you were looking for...

msuresh
17 Feb 2011, 7:01 AM
"viewready" event is not for the editor.

http://dev.sencha.com/deploy/dev/docs/source/Editor.html#event-Ext.Editor-beforestartedit

Ext.Editor allows:
1. beforestartedit
2. startedit (editor is not the argument over here, so no use)
3. beforecomplete
4. complete
5. canceledit
6. specialkey

We need to do some other work around to achieve this...

ShatyUT
17 Feb 2011, 7:07 AM
I'm sorry, I assumed that you were talking about an EditorGridPanel since the title of your post says "Grid". My mistake. What about afterrender? There are many other events available to Ext.Editor that are inherited from Ext.Component.

msuresh
17 Feb 2011, 7:10 AM
No, not even "afterrender", even if I use those, I cant get the editor object as parameter which I need to pass values as params for the combo store url.

msuresh
17 Feb 2011, 11:43 PM
I tried to generate urlparams in renderer and tried to retrieve in editor, however I am unable to receive those urlparams. Any more ideas????

ShatyUT
18 Feb 2011, 7:28 AM
Do you know specifically which cells will have the editor? You can use the viewready event of the grid and then get the column model and call getCellEditor() on it. Something like this:




var grid = new Ext.grid.EditorGridPanel({
...
cm: new Ext.grid.ColumnModel({
...
}),
listeners: {
viewready: function(grid) {
var editor = grid.getColumnModel().getCellEditor(3,0); // Gets editor of cell at column 3 row 0
// plug in your combo load code here
}
}
});


I did not test the above code but maybe that gives you the right solution.

Condor
18 Feb 2011, 7:39 AM
The data is record (row) depended, so you can't just load the combobox store once on viewready. You will need to load it in beforestartedit.

But since you are now loading the store in beforestartedit, you should configure the combobox with mode:'local' (local doesn't mean local data - it means don't load from remote).

You could also leave the combobox on remote and in beforestartedit set the combobox store baseParams and delete the combobox.lastQuery property. This means it will start loading when expanded, which is probably better.

msuresh
18 Feb 2011, 9:11 AM
I added combo.store.load(); and delete combo.lastQuery;

It didn't load all the combo store on each row dynamically. It started loading when I clicked on the cell.

When I clicked on the SECOND ROW combobox cell, it was showing the data of the FIRST ROW combobox, after SECOND ROW store loaded, it re-painted the FIRST ROW data with SECOND ROW store data.

How can we avoid this?



beforestartedit : function(editor) {
var combo = editor.field, record = editor.record;
combo.id = "combo"+editor.row;
combo.rowIndex = editor.row;
combo.store.baseParams = {
"sysId" : editor.record.json.sysId,
"sn" : editor.record.json.sn,
"refasup": me.store.reader.jsonData.refAsupDetails.asupId,
"proximateDate": me.store.reader.jsonData.refAsupDetails.asupDate
};
combo.store.load(); //NEW
combo.store.on('load', function(store, records, options) {
var data = store.reader.jsonData
if (data.error == "true" && data.success == "false") {
if (Ext.isDefined(data.msg)) {
combo.emptyText = data.msg;
}
}
});
delete combo.lastQuery;//NEW
}

Condor
18 Feb 2011, 9:18 AM
No, either load the store and use mode:'local' or don't load the store and clear lastQuery.

You can't use the combobox store data in the column renderer if the store data is row dependent.

You'll have to change your grid store so it holds all the information needed in the renderer.

msuresh
18 Feb 2011, 9:24 AM
Got it. I changed mode: 'local' to mode: 'remote', and it works fine, and it shows loading message too...

However it reloads the data again when I click on the same cell. Can we avoid this reloading for the store already loaded in any way?

Condor
18 Feb 2011, 9:45 AM
Only delete lastQuery if the baseParams actually change.

msuresh
18 Feb 2011, 11:07 AM
Atlast the below solution works better. However we need to get the loading icon till the AJAX call finishes. I need to find a way to get the icon in the combobox.



this.colModel = new Ext.grid.ColumnModel({
columns : [eType, {
dataIndex : 'selectedLogType',
hidden : true
}, {
header : 'System',
dataIndex : 'hostName',
width : 175
}, {
header : 'ASUP',
width : 260,
editable : true,
dataIndex : 'asupRange',
renderer : function(v, meta, r, ridx, cidx, str) {
meta.attr = 'ext:qtip="' + eMessage + '"';
var returnStr = "Select Date";
var asupRange = r.json.asupRange;
if (Ext.isDefined(v)) {
returnStr = Ext.util.Format.date(v, 'D M d Y, H:i T')
} else {
for (var i = 0; i < asupRange.length; i++) {
if (asupRange[i].asupId == r.data.selectedAsup) {
me.selectedAsupIds.push(asupRange[i].asupId);
return asupRange[i].asupDate;
}
}
}
storecnt++;
return returnStr;
},
editor : new Ext.grid.GridEditor(new Ext.form.ComboBox({
store : new Ext.data.JsonStore({
root:'asupRange',
fields : [{name: 'asupDate', mapping: 'asupDate', type: 'date', dateFormat: 'U'},
'asupId', 'asupTitle', 'hostName']
}),
tpl: '<tpl for="."><div class="search-item">' +
'<span>{asupDate:date("D M d Y, H:i T")}</span>' +
'{asupTitle}' +
'</div></tpl>',
displayField:'asupDate',
itemSelector: 'div.search-item',
editable: false,
listWidth:500,
storeLoaded:false,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners : {
select : function(cmbo, record, index) {
var rowIndex = cmbo.rowIndex;
me.setSelectedLogType(record.json, rowIndex);
me.loadLogTypes();
}
}
}), {
listeners : {
beforestartedit : function(editor) {
var combo = editor.field, record = editor.record;
combo.id = "combo"+editor.row;
combo.rowIndex = editor.row;
var record = me.store.getAt(editor.row);
combo.store.loadData({"success":"true","error":"false","totalCount":0,"asupRange":[]});
if(Ext.isEmpty(record.data.combostore)){
Ext.Ajax.request({
url : 'http://localhost/logview/asuprange',
params : {
"sysId" : editor.record.json.sysId,
"sn" : editor.record.json.sn,
"refasup": me.store.reader.jsonData.refAsupDetails.asupId,
"proximateDate": me.store.reader.jsonData.refAsupDetails.asupDate
},
success : function(response) {
var data = Ext.decode(response.responseText);
record.set('combostore',data);
combo.store.loadData(data);
},
failure : function(response) {
//TODO:
}
});
}else{
combo.store.loadData(record.data.combostore);
}
}
}
})
}]
});