PDA

View Full Version : loadRecord() doesn't load the record



ejpoirier
5 Oct 2011, 6:01 PM
I just got through the Ext JS 4 MVC Application Architecture guide (http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture) and am now going back and tweaking things to try and learn more. One of the first things I decided to do was to change the main grid view from a single grid that pops up a window, into a panel with a border layout that has the grid in the center region and a form in the east region. My "app.js" looks like this:



Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
xtype: 'panel',
layout: 'border',
items: [
{
xtype: 'userlist',
region: 'center'
},
{
xtype: 'useredit',
region: 'east'
}
]
});
}
});


My "useredit" view looks like this:



Ext.define('AM.view.user.Edit', {
extend: 'Ext.panel.Panel',
alias: 'widget.useredit',


title: 'Edit User',
layout: 'fit',
autoShow: true,


initComponent: function(){
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}
]
}
];


this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];


this.callParent(arguments);
}
});


The Users controller looks like this:



Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',


stores: ['Users'],
models: ['User'],


views: [
'user.List',
'user.Edit'
],


init: function() {
this.control({


'userlist': {
itemdblclick: this.editUser
},


'useredit button[action=save]': {
click: this.updateUser
}
});
},


editUser: function(grid, record) {
var view = Ext.widget('useredit');
var form = view.down('form');


console.log("editUser " + record.get('name'));
view.down('form').loadRecord(record);


},


updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();


record.set(values);
win.close();
},


showScrollBar: function(grid, record) {
var view = Ext.widget('userlist');
console.log(view.title);
view.title = "New Title";
console.log(view.title);


view.getView('userlist').refresh();


}


});


I can't get a record to load in the form. The useredit does not display the values. However, if I change the view to extend Ext.window.Window, then it displays as a window and loads the record. How do I get the record to load as an "Ext.panel.Panel"? Thanks in advance.

lucasguaru
6 Oct 2011, 5:26 AM
I guess your code should be like this:


editUser: function(grid, record) {
var form = grid.down('form');
console.log("editUser " + record.get('name'));
form.loadRecord(record);
},

When you use Ext.widget('useredit') it does like Ext.create but with alias name.
So you create a new instance, different from you view, and get the form.

ejpoirier
7 Oct 2011, 9:09 AM
Thanks for your help, but it didn't work.

The grid is in a different view, so going "down" from the grid won't reach the form, right? I was using Ext.widget to try and get a reference to the view where the form lives. This works when the form view is an Ext.window.Window, but it doesn't work when the view is an Ext.panel.Panel.

lucasguaru
7 Oct 2011, 9:13 AM
What about go up for the parent of both and then go down?
Something like grid.up('viewport').down('form[name=yourForm]')?

ejpoirier
8 Oct 2011, 4:47 PM
Still no dice. The only way I get it working is if I change the edit view to extend "Ext.window.Window" instead of "Ext.panel.Panel". When the view extends Ext.window.Window then I can use grid.down("form") or grid.up("viewport").down("form") and both of them will work. Change back to extending "Ext.panel.Panel" and it stops working.

ejpoirier
9 Oct 2011, 8:09 AM
I take it back. I going up to the viewport, then back down worked. Thanks for your help!