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

EXT JS: How to load selected grid row into window?

本文关键字：网格 加载 窗口 JS EXT      更新时间：2023-09-26

用户表单

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'
    }]
});

提前感谢！

您需要将引用添加到窗口对象

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();  
        }

将表单属性添加到网格作为对表单的引用，以及一个 showForm（） 函数，当用户单击添加或 dblClick 行的网格时，您可以使用所选行的 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，则创建一个模型实例并加载它，否则检索记录（包含所有您想要的字段）并加载它。

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（）

相关文章：