extjs 弹出模态窗口

1、定义form

[javascript]
view plain
copy

1. var form1 = Ext.create(‘Ext.form.Panel‘, {
2. id:‘form1‘,
3. frame: true,
4. //title: ‘Form Fields‘,
5. //width: 340,
6. bodyPadding: 5,
7. //baseCls: "x-plain",
8. fieldDefaults: {
9. labelAlign: ‘left‘,
10. labelWidth: 90,
11. anchor: ‘100%‘
12. },
13. items: [{
14. xtype: ‘textfield‘,
15. name: ‘job_id‘,
16. fieldLabel: ‘job_fieldlabel‘,
17. value: ‘Text field value‘
18. }, {
19. xtype: ‘textfield‘,
20. name: ‘job_desc‘,
21. //inputType: ‘password‘,
22. fieldLabel: ‘job_fieldLabel‘
23. }, {
24. xtype: ‘textfield‘,
25. name: ‘min_lvl‘,
26. fieldLabel: ‘min_fieldlabel‘
27. }, {
28. xtype: ‘textfield‘,
29. name: ‘max_lvl‘,
30. fieldLabel: ‘max_fieldlabel‘,
31. value: ‘Textarea value‘
32. }]
33. });

2、定义window 载体窗口

[javascript]
view plain
copy

1. var win = Ext.create(‘Ext.Window‘, {
2. title: ‘Resize Me‘,
3. closeAction: ‘hide‘,   //改变系统关闭键的方法为‘hide‘
4. width: 500,
5. height: 500,
6. minWidth: 300,
7. minHeight: 200,
8. maximizable: true,   //是否显示最大化按钮
9. layout: ‘fit‘,
10. plain: true,     //可以强制窗体颜色各背景色变的一样
11. items: form1,     //指明加载哪个form
12. modal: true,        //设定为模态窗口，否则底层网页还是可操作的。
13. buttons: [{
14. text: ‘Send‘, handler: function () { alert(‘send‘); }
15. }, {
16. text: ‘Exit‘,
17. handler: function () { win.hide(); }
18. }]
19. });

3、先定义操作函数：

[javascript]
view plain
copy

1. function AddRecord() {
2. form1.getForm().reset();             //恢复到form定义时的样子。
3. win.show();
4. }
5. function EditRecord() {
6. var row = Ext.getCmp(‘mygrid‘).getSelectionModel().getSelection();
7. if (row.length == 0) {
8. Ext.Msg.alert("提示信息", "请您至少选择一个!");
9. }
10. else if (row.length > 1) {
11. Ext.Msg.alert("提示信息", "对不起只能选择一个!");
12. }
13. else if (row.length == 1) {
14. Ext.Msg.alert("只选了一个！");
15. form1.getForm().loadRecord(row[0]);           //自动载入当前所选的条目，按form中各控件的name名进行加载。
16. win.show();
17. }
18. }
19. function DeleteRecord() {
20. var row = grid.getSelectionModel().getSelection();
21. if (row.length == 0) {
22. Ext.Msg.alert("提示信息", "请您至少选择一个!");
23. }
24. else if (row.length > 1) {
25. Ext.Msg.alert("提示信息", "对不起只能选择一个!");
26. }
27. else if (row.length == 1) {
28. Ext.Msg.alert("只选了一个！");
29. form1.getForm().loadRecord(row[0]);
30. win.show();
31. }
32. }

4、定义按钮控件（可以不定义的，只是为了模块化好维护些，另外上面的函数可以在定义控件中直接定义，就不用单独定义函数了）

[javascript]
view plain
copy

1. var btnAddAction = Ext.create(‘Ext.Action‘, {
2. iconCls: ‘addicon‘,   // ‘../shared/icons/fam/delete.gif‘,  // Use a URL in the icon config
3. text: ‘添加‘,
4. disabled: false,
5. minWidth: 80,
6. handler: function (widget, event) {
7. AddRecord();
8. }
9. });
10. var btnEditAction = Ext.create(‘Ext.Action‘, {
11. iconCls: ‘editicon‘,
12. text: ‘编辑‘,
13. disabled: false,
14. minWidth: 80,
15. handler: function (widget, event) {
16. EditRecord();
17. }
18. });
19. var btnDeleteAction = Ext.create(‘Ext.Action‘, {
20. iconCls: ‘deleteicon‘,
21. text: ‘删除‘,
22. disabled: false,
23. minWidth: 80,
24. handler: function (widget, event) {
25. DeleteRecord();
26. }
27. });
28. ///--------------定义右键弹出菜单--------------------------------------------
29. var contextMenu = Ext.create(‘Ext.menu.Menu‘, {
30. items: [
31. btnAddAction,
32. btnEditAction,
33. btnDeleteAction
34. ]
35. });

5、返回的数据格式(数据提交以后，返回数据格式)  注意success返回的值是布尔型，千万不要加引号变成字符型了。

{success:true} 或 {success:false,msg=‘异常信息‘}

提交语句如下：

[javascript]
view plain
copy

1. modal: true,        //设定为模态窗口
2. buttons: [{
3. text: ‘Send‘,
4. handler: function () {
5. if (form1.getForm().isValid()) {
6. //弹出效果
7. Ext.MessageBox.show(
8. {
9. msg: ‘正在保存，请稍等...‘,
10. progressText: ‘Saving...‘,
11. width: 300,
12. wait: true,
13. waitConfig: { interval: 200 },
14. icon: ‘download‘,
15. animEl: ‘saving‘
16. }
17. );
18. setTimeout(function () { }, 1000);
19. alert(‘send‘);
20. form1.getForm().submit({
21. url: ‘../ashx/TestJobDataSave.ashx‘,
22. //params: { ‘job_id‘: ‘job_id‘, ‘job_desc‘: ‘job_desc‘, ‘min_lvl‘: ‘min_lvl‘, ‘max_lvl‘: ‘max_lvl‘ },  // 默认都是以控件名提交参数，如果参数名相同则可以不用该句。
23. method: "POST",
24. success: function (form, action) {
25. var flag = action.result.success;           //成功返回success为true
26. if (flag ) {
27. alert(‘成功返回！‘);
28. }
29. },
30. failure: function (form, action) {
31. var errorObj = Ext.JSON.decode(action.response.responseText);  <span style="color: rgb(255, 0, 0);"> //字串转化为json对象</span>
32. Ext.Msg.show({
33. title: ‘错误提示‘,
34. msg: errorObj.<span style="color: rgb(255, 0, 0);">msg</span>,          //同上面的msg相对应。可以改为其他值的。
35. buttons: Ext.Msg.OK,
36. icon: Ext.Msg.ERROR
37. });
38. }
39. })
40. }
41. else {
42. alert(‘Form is not valid !‘);
43. }
44. }
45. }, {
46. text: ‘Exit‘,
47. handler: function () { win.hide(); }
48. }]

extjs 弹出模态窗口