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

Ext.form.Panelの代わりに使用しExt.form.FieldSetます。フィールド セットは装飾用のコンテナです。フォーム パネルは、フォームからのデータの読み込み/保存などのサポートを提供します。

次に、クリック イベントでフォーム パネルにアクセスする方法が必要です。最も簡単なのは、フォームに を設定しid、 を使用Ext.getCmpしてフォームへの参照を取得することです。そこにはすでにレコードがあるのでloadRecord、フォーム パネルのメソッドを使用するだけです。

これで完了です。モデルとフォーム フィールドに同じ名前を付けてよかったです ;)

イベント リスナーでの最終呼び出しは次のようになります。

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

どのバージョンの extjs を使用していますか?

フォームが定義またはインスタンス化されていないようです。

グリッドの itemclick イベント ハンドラーで、フォームへの参照を取得し、渡されたレコード (2 番目の引数) で 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 に答える