1、定義form

var form1 = Ext.create('Ext.form.Panel', {id:'form1',frame: true,//title: 'Form Fields',//width: 340,bodyPadding: 5,//baseCls: "x-plain",fieldDefaults: {labelAlign: 'left',labelWidth: 90,anchor: '100%'},items: [{xtype: 'textfield',name: 'job_id',fieldLabel: 'job_fieldlabel',value: 'Text field value'}, {xtype: 'textfield',name: 'job_desc',//inputType: 'password',fieldLabel: 'job_fieldLabel'}, {xtype: 'textfield',name: 'min_lvl',fieldLabel: 'min_fieldlabel'}, {xtype: 'textfield',name: 'max_lvl',fieldLabel: 'max_fieldlabel',value: 'Textarea value'}] });

2、定義window 載體窗口

var win = Ext.create('Ext.Window', {title: 'Resize Me',closeAction: 'hide', //改變系統關閉鍵的方法為'hide'width: 500,height: 500,minWidth: 300,minHeight: 200,maximizable: true, //是否顯示最大化按鈕layout: 'fit',plain: true, //可以強制窗體顏色各背景色變的一樣items: form1, //指明加載哪個formmodal: true, //設定為模態窗口，否則底層網頁還是可操作的。buttons: [{text: 'Send', handler: function () { alert('send'); }}, {text: 'Exit',handler: function () { win.hide(); }}] });

3、先定義操作函數：

function AddRecord() {form1.getForm().reset(); //恢復到form定義時的樣子。win.show(); }function EditRecord() {var row = Ext.getCmp('mygrid').getSelectionModel().getSelection();if (row.length == 0) {Ext.Msg.alert("提示信息", "請您至少選擇一個!");}else if (row.length > 1) {Ext.Msg.alert("提示信息", "對不起只能選擇一個!");}else if (row.length == 1) {Ext.Msg.alert("只選了一個！");form1.getForm().loadRecord(row[0]); //自動載入當前所選的條目，按form中各控件的name名進行加載。win.show();} }function DeleteRecord() {var row = grid.getSelectionModel().getSelection();if (row.length == 0) {Ext.Msg.alert("提示信息", "請您至少選擇一個!");}else if (row.length > 1) {Ext.Msg.alert("提示信息", "對不起只能選擇一個!");}else if (row.length == 1) {Ext.Msg.alert("只選了一個！");form1.getForm().loadRecord(row[0]);win.show();} }

4、定義按鈕控件（可以不定義的，只是為了模塊化好維護些，另外上面的函數可以在定義控件中直接定義，就不用單獨定義函數了）

???

var btnAddAction = Ext.create('Ext.Action', {iconCls: 'addicon', // '../shared/icons/fam/delete.gif', // Use a URL in the icon configtext: '添加',disabled: false,minWidth: 80,handler: function (widget, event) {AddRecord();}});var btnEditAction = Ext.create('Ext.Action', {iconCls: 'editicon',text: '編輯',disabled: false,minWidth: 80,handler: function (widget, event) {EditRecord();}});var btnDeleteAction = Ext.create('Ext.Action', {iconCls: 'deleteicon',text: '刪除',disabled: false,minWidth: 80,handler: function (widget, event) {DeleteRecord();}});///--------------定義右鍵彈出菜單--------------------------------------------var contextMenu = Ext.create('Ext.menu.Menu', {items: [btnAddAction,btnEditAction,btnDeleteAction]});

5、返回的數據格式(數據提交以后，返回數據格式)? 注意success返回的值是布爾型，千萬不要加引號變成字符型了。

{success:true} 或 {success:false,msg='異常信息‘}??

提交語句如下：

modal: true, //設定為模態窗口buttons: [{text: 'Send',handler: function () {if (form1.getForm().isValid()) {//彈出效果Ext.MessageBox.show({msg: '正在保存，請稍等...',progressText: 'Saving...',width: 300,wait: true,waitConfig: { interval: 200 },icon: 'download',animEl: 'saving'});setTimeout(function () { }, 1000);alert('send');form1.getForm().submit({url: '../ashx/TestJobDataSave.ashx',//params: { 'job_id': 'job_id', 'job_desc': 'job_desc', 'min_lvl': 'min_lvl', 'max_lvl': 'max_lvl' }, //默認都是以控件名提交參數，如果參數名相同則可以不用該句。method: "POST",success: function (form, action) { var flag = action.result.success; //成功返回success為trueif (flag ) { alert('成功返回！'); }},failure: function (form, action) { var errorObj = Ext.JSON.decode(action.response.responseText); <span style="margin: 0px; padding: 0px; border: 0px; color: rgb(255, 0, 0); background: transparent;"> //字串轉化為json對象</span>Ext.Msg.show({title: '錯誤提示',msg: errorObj.<span style="margin: 0px; padding: 0px; border: 0px; color: rgb(255, 0, 0); background: transparent;">msg</span>, //同上面的msg相對應。可以改為其他值的。buttons: Ext.Msg.OK,icon: Ext.Msg.ERROR}); }})}else {alert('Form is not valid !');}}}, {text: 'Exit',handler: function () { win.hide(); }}]

總結

以上是生活随笔為你收集整理的Extjs 4.0.7 中模式窗口的CURD的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。