Extjs 4.0.7 中模式窗口的CURD
1、定义form
[javascript]
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 载体窗口
[javascript]
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、先定义操作函数：
[javascript]
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、定义按钮控件（可以不定义的，只是为了模块化好维护些，另外上面的函数可以在定义控件中直接定义，就不用单独定义函数了）
[javascript]
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:'true'} 或 {success:'false'}
提交语句如下：
[javascript]
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) { alert('成功返回！'); },
failure: function (form, action) { alert('返回错误'); }
})
}
else {
alert('Form is not valid !');
}
}
}, {
text: 'Exit',
handler: function () { win.hide(); }
}]
