привязать сетку к форме без использования mvc

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

Использовать Ext.form.Panel вместо Ext.form.FieldSet. Набор полей - скорее украшающий контейнер. Панель формы обеспечивает поддержку для загрузки/сохранения данных из формы и т. Д.

Затем вам нужно получить доступ к панели формы в событии кликов. Абсолютным простейшим является установка id в форме и использование Ext.getCmp для получения ссылки на форму. Поскольку у вас уже есть запись, вы можете просто использовать метод формы loadRecord.

И все будет готово! Будьте счастливы назвали вашу модель & формы поля такой же;)

Последний вызов в прослушивателя событий будет выглядеть следующим образом:

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

Answer 2

какая версия extjs вы используете?

У вас нет формы, определенной или созданной.

в itemclick обработчика событий сетке, вы должны получить ссылку на форму, и вызвать form.loadRecord с принятым в записи (2-й аргумент):

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

пример:

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