PDA

View Full Version : Auto select newly added record in grid



svroves
13 May 2012, 3:24 AM
I am trying to create a kind of todo items by using grid and storing data in MySQL database.
I have created a toolbar button 'Add New' which will prompt to enter text. On submit, it will be sent to php program to create new todo item. After that, program will load the store (which renders the grid automatically). I want the newly created todo item should be selected by default.

Here is my code:


items: [{region: 'west',
xtype: 'grid', id:'TodoGrid', itemId:'TodoGrid', bodyStyle: 'border-bottom:0px',
store: TodoStore,layout:'fit',
columns: [
{ xtype: 'rownumberer', width: 30, sortable: false },
{ text: 'ID', width: 30, sortable : false, hide:false, dataIndex: 'id' },
{ text: 'Topic', flex:1, sortable : true, dataIndex: 'topic' }
],
tbar:[{
text:'New Todo',
tooltip:'',
iconCls:'add',
handler: function(grid, rowIndex, colIndex) {

Ext.Msg.prompt('Todo', "Enter Todo title:", function(btn, text, cfg) {
if(btn == 'ok' && !Ext.isEmpty(text)) {
Ext.Ajax.request({
url: 'Todo-create.php',
params: { topic:text },
success: function (result) {
Ext.getCmp('status').setText(arr[1]);
if (result.responseText>0) {
iSelectedRecordID=result.responseText;
TodoStore.load();
}
}
});
}
});
}
}],
listeners: {
selectionchange: function(sm, selections) {
if (selections.length==0 && iSelectedRecordID!=0) {
var x=TodoStore.find('id', iSelectedRecordID);
if (x>=0) {
Ext.getCmp("TodoGrid").getSelectionModel().select(x);
iSelectedRecord = TodoStore.getAt(x);
iSelectedRecordID = iSelectedRecord.get('id');
}
}
}
},
width:300,
minWidth: 250,split: true
}


TodoStore.find('id', iSelectedRecordID) is not finding the newly added record. Always returns '-1'. Although the grid displays the newly added record.

Please help.

13 May 2012, 4:29 AM
Pyramids of code like this really is not maintainable! I highly suggest against developing this way. Also, it seems that you're doing things in a way that uses globals. Don't do it.

If you're adding one item, don't do a full store load! Just perform an add action on the server side, have that result return the object that represents a record, add that to the store and select it.

svroves
13 May 2012, 4:41 AM
My grid is sorted on a column. So, adding a new record at 0 position or last might not user-friendly.
Also, the grid has paging bar. So if I add record to the grid manually (without load), it does not update the count of records or pagination on the paging bar.

svroves
20 May 2012, 11:51 PM
No suggestions so far.

Finally I go that working with the use of Callback from store.load()