PDA

View Full Version : loadRecord() loads data, but form does not reflect new data.



xjscrafter
17 Dec 2013, 11:30 PM
I have a grid, and when I right click the grid and select Modify from my context menu, a Window with a form is created, and on render, I get the grid selected row record and use the form loadRecord to load the record.

Firebug shows the record was loaded into the form fields, but in the rendered form the fields are enpty.

Any ideas?

xjscrafter
18 Dec 2013, 7:09 AM
Wondering if anyone can shed light on this. The data is loaded but the UI does not show the data in the textfields.

Do I need to refresh something?

xjscrafter
18 Dec 2013, 9:14 AM
SOLVED - needed to loadRecord() on the afterrender event, not the render event. Code modified below.

Here is some code that illustrates the issue.

If you put a breakpoint at the line with var test = 'test'; you will see the data is loaded into the form's textfields, but then continue past the break point and see the textfields do not reflect the data.


Ext.onReady(function() {
Ext.define('com.myCompany.MyGridModel', {
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
}, {
name : 'address',
type : 'string'
}, {
name : 'type',
type : 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'com.myCompany.MyGridModel',
proxy: {
type: 'ajax',
url: 'centers.json',
reader: {
type: 'json',
root: 'centers'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
name: 'name'
}, {
text: 'IP Address',
dataIndex: 'address',
name: 'address'
}, {
text: 'Type',
dataIndex: 'type',
name: 'type'
}],
renderTo: Ext.getBody(),
listeners: {
itemcontextmenu : function(view, record, item, index, event){
var selectedItem = record;
event.preventDefault();
new Ext.menu.Menu({
items: [{
text : 'Modify',
handler : function(widget, event) {
Ext.create('Ext.window.Window', {
height : 380,
width : 540,
resizable : false,
closable: true,
modal: true,
layout :{
type : 'fit'
},
items : [{
xtype : 'form',
frame : true,
height : 250,
itemId : 'centerContentForm',
width : 400,
bodyPadding : 10,
items : [{
xtype : 'textfield',
itemId : 'txtName',
height : 30,
width : 401,
fieldLabel : 'Name',
name: 'name',
allowBlank : false
},{
xtype : 'textfield',
itemId : 'txtIPAddress',
height : 30,
width : 401,
fieldLabel : 'Address',
name: 'address',
allowBlank : false,
},{
xtype : 'textfield',
itemId : 'txtType',
height : 30,
width : 401,
fieldLabel : 'Type',
name: 'type',
allowBlank : false
}]
}],
listeners: {
afterrender: function(win) {
win.down('form').loadRecord(selectedItem);
var test = 'test';
}
}
}).show();
} // end of right-click handler
}]
}).showAt(event.getXY());
}
}
});
grid.getView().refresh();
});

xjscrafter
18 Dec 2013, 11:18 AM
Wondering if anyone can shed light on this?

xjscrafter
18 Dec 2013, 1:59 PM
Turns out I needed to do the load on the afterrender event. Thought I had checked that. Now it works.