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:
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.