EXT JS：如何将选定的网格行加载到窗口中？

Question

用户表格

Ext.define('Patients.view.Form',{
    extend: 'Ext.form.Panel',
    xtype: 'patients_form',
    title: 'Patient Info',

    defaultType: 'textfield',
    items: [{
        fieldLabel:'Name',
        name: 'name',
        allowBlank: false,
    },{
        fieldLabel: 'Age',
        name: 'age',
        allowBlank: false
    },{
        fieldLabel: 'Phone',
        name: 'phnumber',
        allowBlank: 'false'
    }],

    dockedItems: [{
        xtype:'toolbar',
        dock: 'bottom',
        items:[{
             iconCls: 'icon-user-add',
             text: 'Add',
             scope: this,
             itemId: 'addButton'

         },{
             iconCls: 'icon-reset',
             itemId:'resetButton',
             text: 'Reset',
             scope: this

         },{
             iconCls: 'icon-save',
             itemId: 'savebutton',
             text: 'Save',
             disabled: true,
             scope: this

       }]
  }]

 });

这是显示用户输入的网格。 在行上双击，一个窗口启动，但是它是空的。 如何显示窗口网格中所选行的信息？

Ext.define('Patients.view.Grid',{
    extend: 'Ext.grid.Panel',
    store:'PatientsInfo',
    xtype: 'patients_grid',
    selType: 'rowmodel',

    listeners:{
        itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.show();  

        }
    },

    columns: [{

        text: 'Name',
        sortable: true,
        resizable: false, 
        draggable: false,
        hideable: false,
        dataIndex: 'name'
    },{
        text: 'Age',
        sortable: true,
        resizable: false,
        draggable: false,
        hideable: false,
        dataIndex: 'age'
    },{
        text: 'Phone Number',
        sortable: false,
        resizable: false,
        draggable: false,
        hideable: false,
        dataIndex: 'phnumber'
    }]
});

提前致谢！

Answer 1

您需要向窗口对象添加引用

items: [{
        fieldLabel:'Name',
        name: 'name',
        allowBlank: false,
        ref : '../name'
    },{
        fieldLabel: 'Age',
        name: 'age',
        allowBlank: false,
        ref : '../age'
    },{
        fieldLabel: 'Phone',
        name: 'phnumber',
        allowBlank: 'false',
        ref : '../phnumber'
    }],

并在显示窗口时为其设置数据。

itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.name = record.get('name');
            win.age = record.get('age');
            win.prohne = record.get('phone');
            win.show();  

        }

Answer 2

将表单属性添加到Grid作为表单的引用，还添加一个showForm（）函数，当用户单击“添加”或dbl单击行的网格时，可以使用选定行的ID或null（单击添加时）来调用它。 showForm（）检查表单引用，如果为null，则创建表单实例并调用this.form.loadFormData（id）

    Ext.define('Patients.view.Grid',{
    extend: 'Ext.grid.Panel',
    store:'PatientsInfo',
    xtype: 'patients_grid',
    selType: 'rowmodel',

    listeners:{
        itemdblclick: function(record){
            var win = Ext.create("Ext.Window",{
                title: 'Patients Window',
                height: 160,
                width: 160, 

            })
            win.show();  

        }
    },

form:null,
showForm:function(id){
         if(!form) this.form = new Patients.view.Form();
         this.form.loadFormData(id);
},
//columns:....

并以loadFormData（）的形式根据ID做出决定。 如果为null，则创建一个Model实例并加载它，否则检索记录（包含您所有的期望字段）并加载它。

Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',

defaultType: 'textfield',
items: [{
    fieldLabel:'Name',
    name: 'name',
    allowBlank: false,
},{
    fieldLabel: 'Age',
    name: 'age',
    allowBlank: false
},{
    fieldLabel: 'Phone',
    name: 'phnumber',
    allowBlank: 'false'
}],
    // docked items and else...

loadFormData:function(id){
 var me = this.
 if(!id){
  var record = new Patients.model.User();
  this.loadRecord(record);
 }
 else{
  var record  = Patients.model.User.load(id,{
              callback:function(record){  
                                me.loadRecord(record);
                                var win = Ext.view.Window({
                                  items:[me],
                                  });
                                 win.show();
                               }
             }

 }
}

Ext.data.Model.load（）是静态方法。

最后，您创建一个窗口并向其中添加表单，然后调用show（）