Extjs 4.0.7 中模式窗口的CURD

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,     //指明加载哪个form
modal: 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 config
text: '添加',
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为true
                        if (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(); }
}]