loadRecord() doesn't load the record

[ejpoirier]

I just got through the Ext JS 4 MVC Application Architecture guide (http://docs.sencha.com/ext-js/4-0/#!...n_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]

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]

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]

What about go up for the parent of both and then go down?
Something like grid.up('viewport').down('form[name=yourForm]')?

[ejpoirier]

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]

I take it back. I going up to the viewport, then back down worked. Thanks for your help!