0

User Form

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

       }]
  }]

 });

This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window? 

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

Thanks in advance!

4

2 回答 2

0

向 Grid添加一个表单属性作为对表单的引用，以及一个showForm()函数，当用户在行的网格上单击 Add 或 dblClick 时，您可以使用所选行的 id 或 null（单击 add 时）调用它。showForm()检查表单引用，如果为空，则创建表单实例并调用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 做出决定。如果它为空，则创建一个模型实例并加载它，否则检索记录（带有所有您想要的字段）并加载它。

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

于 2014-08-27T04:56:19.747 回答
0

您需要将 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();  

        }
于 2013-09-07T13:15:47.710 回答