首先在grid的tbar中定義編輯按鈕：
Js代碼
復制代碼 代碼如下:
id:'editDataButton',
text:'編輯',
tooltip:'編輯',
iconCls:'edit',
handler: function(){ showeditPanel();}
再定義form：
Js代碼
復制代碼 代碼如下:
var xjjlEditForm = new Ext.FormPanel({.......省略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
}
這樣就可以在新窗口中對選中的數據進行編輯了;