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

도 형성 참조 및 같은 그리드에 showForm을 형태 속성을 추가() 기능이 행의 그리드에 추가 또는 dblClick에 사용자가 클릭, 당신은 선택의 ID로를 호출 할 때 행 또는 null (추가 클릭시). 이 널 (null) 인 경우 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의 형태로 당신이 할 전화 결정은 이드에 달려있다. 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()를 호출하십시오.