0

我正在尝试将网格数据绑定到 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'
}]
    });

});
4

2 回答 2

0

你用的是什么版本的extjs？

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

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

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

例子：

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

于 2013-06-24T23:49:01.067 回答
0

使用Ext.form.Panel而不是Ext.form.FieldSet. 字段集更像是一个装饰容器。表单面板支持从表单加载/保存数据等。

Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.

And you'll be done! Be happy to have named your model & form fields the same ;)

The final call in the event listener will look like this:

Ext.getCmp('myForm').loadRecord(record);
于 2013-06-24T23:51:18.470 回答