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

您需要将refs添加到窗口对象

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（）函数，当用户单击Add或dblClick on the row's grid时，使用所选行的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（）

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

2 个答案: