从控制器设置窗口字段值答案

【问题标题】：Setting window field values from controller从控制器设置窗口字段值
【发布时间】：2013-09-10 17:52:31
【问题描述】：

我有一个窗口，当单击某个单元格时，它会在弹出窗口中显示有关用户的值。在我的 UserController 中，我根据 id 加载用户的 json，有没有办法将此 json 的特定值传递到我的窗户？我知道我可以使用 .getForm().setValues() 如果它是一个表单。我可以在我的窗口中嵌套一个表单吗？

控制器sn-p：

loadUserDetails: function(userId) {
        var view = Ext.widget('userdetails').show();
        Ext.Ajax.request({
            url:  /user/get.htm?alt=json',
                params: { id: userId },
            success: function(response) {
                var json = Ext.JSON.decode(response.responseText);
            }
        });
    }

查看 sn-p（窗口）：

Ext.define('App.view.user.UserDetails', {
    extend: 'Ext.window.Window'
    ,alias: 'widget.userdetails'
    ,id: 'userdetails'
    ,title: 'User Details'
    ,height: 300
    ,width: 380

    ,initComponent: function() {
        var me = this;
        this.items = [{
            xtype: 'fieldset',
            title: 'Information',
            margin: '5',
            width: 350,
            height: 250,
            defaults: {xtype: 'displayfield', margin: '3', labelWidth: 100, width: 300},
            items: [{
                id: 'id',
                width: 150,
                fieldLabel: 'User Id'
            },{
                id: 'email',
                width: 250,
                fieldLabel: 'User Email'
            }]

        }];
        this.callParent(arguments);
    }
});

【问题讨论】：

标签： javascript ajax extjs extjs-mvc

【解决方案1】：

鉴于这个类：

Ext.define('App.view.user.UserDetails', {
    extend: 'Ext.window.Window'
    ,alias: 'widget.userdetails'
    ,id: 'userdetails'
    ,title: 'User Details'
    ,height: 300
    ,width: 380
    ,items: [{
        xtype: 'fieldset',
        title: 'Information',
        margin: '5',
        width: 350,
        height: 250,
        defaults: {xtype: 'displayfield', margin: '3', labelWidth: 100, width: 300},
        items: [{
            // you should avoid using fixed id that will prevent using the component
            // multiple times
            // id: 'id',
            width: 150,
            fieldLabel: 'User Id'

            ,itemId: 'userId' // <= add item id for easy retrieval
        },{
            // id: 'email',
            width: 250,
            fieldLabel: 'User Email'

            ,name: 'userEmail' // <= or a name, as is logical for a field
        }]
    }]
});

您可以使用component queries 获取对您的字段的引用并设置其值：

var win = Ext.create('App.view.user.UserDetails', {
    autoShow: true
});

// query by itemId
win.down('#userId').setValue(123);

// or by name
win.down('field[name=userEmail]').setValue('user@example.com');

或者您可以在窗口中嵌套一个表单，以便您可以使用setValues（和其他表单功能）：

Ext.define('App.view.user.UserDetails', {
    extend: 'Ext.window.Window'
    ,alias: 'widget.userdetails'
    ,id: 'userdetails'
    ,title: 'User Details'
    ,height: 300
    ,width: 380
    ,layout: 'fit'
    ,items: [{
        xtype: 'form'
        ,items: [{
            xtype: 'fieldset',
            title: 'Information',
            margin: '5',
            width: 350,
            height: 250,
            defaults: {xtype: 'displayfield', margin: '3', labelWidth: 100, width: 300},
            items: [{
                width: 150,
                fieldLabel: 'User Id'
                // name is required for setValues to work
                ,name: 'userId'
            },{
                // id: 'email',
                width: 250,
                fieldLabel: 'User Email'
                ,name: 'userEmail'
            }]
        }]
    }]
});

var win = Ext.create('App.view.user.UserDetails', {
    autoShow: true
});

win.down('form').setValues({
    ...
});

【讨论】：