PDA

View Full Version : Unable to select newest grid record after store reload



cmgreen
15 Apr 2014, 7:02 AM
For this example I am using the following:
Architect version: 2.2.2 Build 991


I am having an issue with accessing the newest record added to a store after reload. I currently have a window that contains a toolbar and a gridpanel. The toolbar has one button for adding a new hospital to the grid. When the button is clicked it adds the record, reloads the store and selects the last record. The problem is on reload I need it to select the record I just added. When the store reloads it is always selecting the second to last record no matter what I do. The strange thing is I can feed the button code directly to the Chrome console and it works as expected. Any ideas would be appreicated.


VIEW
NewHospital.js



Ext.define('Itwac.view.NewHospital', { extend: 'Ext.window.Window',




height: 623,
hidden: false,
id: 'hospitaladdedit',
itemId: 'hospitaladdedit',
width: 338,
autoScroll: true,
layout: {
type: 'fit'
},
animCollapse: true,
title: 'Hospitals',
maximizable: true,
minimizable: true,
x: 15,
y: 30,




initComponent: function() {
var me = this;




Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
id: 'hospitalitems',
itemId: 'hospitalitems',
header: false,
title: '',
store: 'HospitalStore',
columns: [
{
xtype: 'gridcolumn',
autoRender: true,
itemId: '',
defaultWidth: 250,
dataIndex: 'hospitalname',
text: 'Hospital Name',
flex: 1,
editor: {
xtype: 'textfield'
}
}
],
viewConfig: {
id: 'hospitalitemsgrid',
itemId: 'hospitalitemsgrid'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
edit: {
fn: me.onCellEditingEdit,
scope: me
}
}
})
],
selModel: Ext.create('Ext.selection.CellModel', {
mode: 'SINGLE'
})
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
layout: {
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
itemId: 'addhospital',
scale: 'medium',
text: 'Add Hospital'
}
]
}
]
});




me.callParent(arguments);
},




onCellEditingEdit: function(editor, e, eOpts) {




}




});


STORE
HospitalStore.js



Ext.define('Itwac.store.HospitalStore', {
extend: 'Ext.data.Store',


requires: [
'Itwac.model.HospitalModel'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'Itwac.model.HospitalModel',
storeId: 'HospitalStore',
proxy: {
type: 'ajax',
api: {
create: 'data/hospitalcreate.php',
update: 'data/hospitalupdate.php'
},
url: 'data/hospital.php',
reader: {
type: 'json',
idProperty: 'hospitalid',
root: 'results'
},
writer: {
type: 'json',
allowSingle: false,
encode: true,
expandData: true,
root: 'data'
}
}
}, cfg)]);
}
});


MODEL



Ext.define('Itwac.model.HospitalModel', {
extend: 'Ext.data.Model',


fields: [
{
name: 'hospitalname',
type: 'string'
},
{
name: 'hospitalid',
type: 'int'
}
]
});


CONTROLLER
PurchaseRequisition.js



onAddHospitalButtonClick: function(button, e, eOpts) {
var hospitalstore = Ext.getStore('HospitalStore');
hospitalstore.add({hospitalname: 'NEW HOSPITAL'});
hospitalstore.reload();
var max = hospitalstore.getTotalCount();
var grid = Ext.ComponentQuery.query('gridpanel[itemId=hospitalitems]')[0];
var selmodel = grid.getSelectionModel();
var record = hospitalstore.getAt(max - 1);
selmodel.select(record.index);


}

Farish
15 Apr 2014, 7:11 AM
its probably because the store is not reloaded when you do the getTotalCount() and select(). these should be called after the store has been loaded. you can do that on the load event of the store.

cmgreen
16 Apr 2014, 6:19 AM
That was exactly the problem. Once I transferred the button code below the reload statement to the load event it worked like a charm. Thanks Farish.