extjs中form與grid互動資料(record)的方法_javascript技巧

先在grid的tbar定義編輯按鈕：
Js程式碼

複製程式碼 程式碼

複製程式碼

程式碼



程式碼

id:'editDataButton',

text:'編輯',

tooltip:'編輯',
iconCls:'edit',

handler: function(){ showeditPanel( );} 再定義form： Js程式碼

複製程式碼

程式碼如下:

var xjjlEditForm ({.......省略form中的定義內容........});

然後定義編輯按鈕要呼叫的函數showeditPanel(同時定義一個載入form的window)： Js代碼

複製程式碼


程式碼如下:

//--編輯按鈕呼叫的功能（編輯器編輯窗體)

function showeditPanel()
{ //直接取得選取的行對應的record
var record = grid.getSelectionModel().getSelected()
if(!record){
Ext.Msg.alert('訊息','請選擇要編輯的資料');
return;
}

//--定義編輯窗體
if(!xjjlEditWindow)
{
xjjlEditWindow = new Ext.Window({
el: 'edit_win', //前端放置目前js檔案的頁面中的div名稱

title:'編輯記錄',

width: 650,
height: 360,

closable: false,

closeAction: 'hide',
resizable : false,
items: xjjlEditForm //在window中載入編輯的form
});

}
xjjlEditWindow.show(Ext.get('editDataButton'));//顯示編輯視窗 //[注意]先xjjlEditWindow.show(); 再xjjlEditForm.getForm().loadRecord(currrecordRecord); 就可以解決之前的頁面載入完成以後,第一次點擊[編輯]按鈕時無法載入資料到form的問題了。 xjjlEditForm.getForm().loadRecord(record); //關鍵​​是這裡用目前選取的grid中的record填充form }這樣就可以在新視窗中對選取的資料進行編輯了;