0

ユーザーフォーム

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

前もって感謝します！

4

2 に答える 2

0

フォームプロパティをフォームへの参照として Gridに追加し、ユーザーが行のグリッドで [追加] または [dblClick] をクリックしたときに、選択した行の ID または null ([追加] をクリックしたとき) で呼び出す showForm()関数も追加します。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() を呼び出します。

于 2014-08-27T04:56:19.747 に答える