ExtJS 4 Loading data into form panel on creation. Which event to catch?
I'm stuck with populating Ext.form.Panel
with data in my MVC project. In Controller I want to load data from store into form. But I cannot access basic form via form panel.
Form view
Ext.define('Example.view.webitem.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.webitemform',
renderTo: 'webstructure-form',
items: [{
xtype: 'fieldset',
title: 'Metadata',
items: [{
xtype: 'displayfield',
name: 'id',
fieldLabel: 'ID'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}]
}],
buttons: [{
text: 'Load',
action: 'loaditem'
}]
});
Controller
Ext.define('Example.controller.WebItemsForm', {
extend: 'Ext.app.Controller',
stores: ['WebItemsForm'],
models: ['WebItem'],
views: ['webitem.Form'],
init: function() {
// This does not work. Data aren't loaded in store
this.control({
'webitemform': {
render: this.loadItem
}
});
// This works, but isn't userfriendly
this.control({
'webitemform button[action=loaditem]': {
click: this.loadItem
}
});
},
loadItem: function() {
var form = this.getWebItemForm().getForm();
var data = this.getStore('WebItemsForm').getAt(0);
form.loadRecord(data);
}
});
After clicking on Load
button, data are correctly loaded into form. But when I'm trying to catch Ext.开发者_StackOverflowform.Panel render
event, store doesn't have data loaded.
Uncaught TypeError: Cannot read property 'data' of undefined.
If I understand correctly, this is caused because load operation is asynchronous? How to load data on render event? Is there more suitable event?
Afer the panel is rendered (afterrender
event) check if store is is loaded yet (usally it will not be, unless panel's render has been deferred because it's in an inactive tab for example). If the test fails in the same event add load
listener to the store, that will push data back to panel once it's ready.
精彩评论