Question

我正在尝试将网格数据绑定到extjs中的表单。当我点击网格行时，应该在表单中填充详细信息。我可以在不使用MVC的情况下以简单的方式做到这一点。我写了下面的代码。进一步帮助我。谢谢

// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});

Ext.onReady(function() {

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { id: '1', name: 'srb', email: 'srb@gmail.com', phone: '555-111-1224' },
        { id: '2', name: 'srv', email: 'srv@gmail.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    title: 'All Users',
    columns: [
        {
            text: 'Id',
            dataIndex: 'id' ,
            flex: 1
        },
        {
            text: 'Name',
            dataIndex: 'name',
            flex: 2
        },
        {
            text: 'Email Address',
            flex: 3,
            dataIndex: 'email',
        },
        {
            text: 'Phone Number',
            flex: 2,
            dataIndex: 'phone'
        }
    ],
    listeners : {
    itemclick: function(dv, record, item, index, e) {
     var nm= record.get('name');     
}
},
});

Ext.create('Ext.form.FieldSet',{
    renderTo: Ext.getBody(),
    margin: '0 0 0 10',

title:'User details',

defaults: {
    width: 240,
    labelWidth: 90
},

defaultType: 'textfield',

items: [{
    fieldLabel: 'Id',
    name: 'id'
},{
    fieldLabel: 'Name',
    name: 'name'
},{
    fieldLabel: 'Email Id',
    name: 'email'
},{
    fieldLabel: 'Phone Number',
    name: 'phone'
}]
    });

});

Answer 1

你使用的是什么版本的extj？

您似乎没有定义或实例化表单。

在你的网格的itemclick事件处理程序中，你需要获得对表单的引用，并使用传入的记录（第二个参数）调用form.loadRecord：

itemclick: function(dv, record, item, index, e) {
     var form = getAReferenceToTheFormObject();
     form.loadRecord(record);     
}

示例：

http://jsfiddle.net/4TSDu/74/

Answer 2

使用Ext.form.Panel代替Ext.form.FieldSet。 Field set更像是一个装饰容器。表单面板支持从表单中加载/保存数据等。

然后，您需要一种在点击事件中访问表单面板的方法。绝对最简单的是在表单上设置id，并使用Ext.getCmp来获取表单的引用。由于您已经在那里获得了记录，因此您可以使用表单面板的loadRecord方法。

你会完成的！很高兴为您的模型和模型命名表单字段相同;）

事件监听器中的最终调用将如下所示：

Ext.getCmp('myForm').loadRecord(record);

在不使用mvc的情况下将网格绑定到表单

2 个答案: