1、Ajax标准请求：

1. Ext.Ajax.request({ 
2.                                     url : '../../blackList/deleteBlackLists.do', 
3.                                     params : { 
4.                                         records : blackListRecords 
5.                                     }, 
6.                                     success : function(response, opts) { 
7.                                         var data = Ext 
8.                                                 .decode(response.responseText); 
9.                                         if (data.success) { 
10.                                             Ext.MessageBox.alert('成功', '删除成功!'); 
11.                                         } else { 
12.                                             Ext.MessageBox.alert('失败', '删除失败!'); 
13.                                         } 
14.                                     }, 
15.                                     failure : function() { 
16.                                         Ext.MessageBox.alert('失败', '删除超时!'); 
17.                                     } 
18.                                 }); 

2、登录

1. Ext.onReady(function() { 
2.     Ext.QuickTips.init(); 
3.     var adminRadio = new Ext.form.Radio({ 
4.                 boxLabel : '管理员', 
5.                 inputValue : 'admin', 
6.                 listeners : { 
7.                     'check' : function() { 
8.                         if (adminRadio.getValue()) { 
9.                             userRadio.setValue(false); 
10.                             adminRadio.setValue(true); 
11.                         } 
12.                     } 
13.                 } 
14.             }); 
15.     var userRadio = new Ext.form.Radio({ 
16.                 boxLabel : '普通用户', 
17.                 inputValue : 'user', 
18.                 listeners : { 
19.                     'check' : function() { 
20.                         if (userRadio.getValue()) { 
21.                             adminRadio.setValue(false); 
22.                             userRadio.setValue(true); 
23.                         } 
24.                     } 
25.                 } 
26.             }); 
27.     var _form = new Ext.form.FormPanel({ 
28.                 title : '系统登录', 
29.                 frame : true, 
30.                 width : 290, 
31.                 height : 160, 
32.                 layout : 'form', 
33.                 buttonAlign : 'center', 
34.                 labelAlign : 'center', 
35.                 defaults : { 
36.                     width : 160, 
37.                     labelWidth : 80, 
38.                     xtype : 'textfield' 
39.                 }, 
40.                 items : [{ 
41.                             fieldLabel : '用 户 名', 
42.                             vtype : 'alpha', 
43.                             id : 'name', 
44.                             name : 'name' 
45.                         }, { 
46.                             fieldLabel : '通 行 证', 
47.                             inputType : 'password', 
48.                             vtype : 'alpha', 
49.                             id : 'pass', 
50.                             name : 'pass' 
51.                         }, { 
52.                             xtype : 'radiogroup', 
53.                             fieldLabel : '用户类型', 
54.                             id : 'typeRadio', 
55.                             items : [adminRadio, userRadio] 
56.                         }], 
57.                 buttons : [{ 
58.                             text : '登 录', 
59.                             style : 'margin-right:15' 
60.                         }, { 
61.                             text : '清 除', 
62.                             style : 'margin-left:15', 
63.                             handler : function() { 
64.                                 var _name = _form.findById('name').setValue(''); 
65.                                 var _pass = _form.findById('pass').setValue(''); 
66.                             } 
67.                         }] 
68.             }); 
69.             _form.render('container'); 
70. }) 

 3、column布局中的fieldLabel消失的解决方法：在里面加上layout : 'form', 

1. layout : 'form', 
2. items : [item_ListType, { 
3.             layout : 'column', 
4.             border : false, 
5.             labelWidth : 60, 
6.             items : [{ 
7.                         layout : 'form', 
8.                         items : listType 
9.                     }, { 
10.                         layout : 'form', 
11.                         items : item_simpleQuery 
12.                     }] 
13.         }, { 
14.             layout : 'column', 
15.             border : false, 
16.             items : [{ 
17.                         layout : 'form', 
18.                         items : item_startTime 
19.                     }, { 
20.                         layout : 'form', 
21.                         items : item_endTime 
22.                     }] 
23.         }] 

 4、html的dom节点：body

document.body

5、new Ext.Viewport：

不需要render或show，所以也不需要在html中先定义div；

常用于整体布局

6、window的功能点

模态窗口：modal : Boolean

7、对话框

confirm对话框：

1. Ext.Msg.confirm('Name', '确定要删除吗？', function(btn) { 
2.         if (btn == 'yes') { 
3.             // process text value and close... 
4.             Ext.Msg.alert('Status', "确实要删除"); 
5.             //btn.hide(); 
6.         } else { 
7.             Ext.Msg.alert('Status', "不用删除"); 
8.         } 
9.     }); 

prompt对话框：

1. Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ 
2.     if (btn == 'ok'){ 
3.         // process text value and close... 
4.         Ext.Msg.alert('Status', text); 
5.         //btn.hide(); 
6.     } 
7. }); 

模态对话框：modal: true 

1. var window = new Ext.Window({ 
2.                     width : 400, 
3.                     height : 300, 
4.                     modal: true 
5.                 }); 
6.                 window.show(); 

 

8、树展开

1. var vroot = new Ext.tree.TreeNode({ 
2.     text : 'root node', 
3.     expanded : tree, 
4. // hidden : true 
5. }); 
6.  
7. var sub11 = new Ext.tree.TreeNode({ 
8.     text : 'sub node11' 
9. }); 
10. var sub12 = new Ext.tree.TreeNode({ 
11.     text : 'sub node12' 
12. }); 
13. var sub1 = new Ext.tree.TreeNode({ 
14.     text : 'sub node1' 
15. }); 
16. sub1.appendChild(sub11); 
17. sub1.appendChild(sub12); 
18.  
19. var sub2 = new Ext.tree.TreeNode({ 
20.     text : 'sub node1' 
21. }); 
22. var sub31 = new Ext.tree.TreeNode({ 
23.     text : 'sub node11' 
24. }); 
25. var sub32 = new Ext.tree.TreeNode({ 
26.     text : 'sub node12' 
27. }); 
28.  
29. var sub3 = new Ext.tree.TreeNode({ 
30.     text : 'sub node1' 
31. }); 
32. sub3.appendChild(sub31); 
33. sub3.appendChild(sub32); 
34.  
35. var sub4 = new Ext.tree.TreeNode({ 
36.     text : 'sub node1' 
37. }); 
38.  
39. vroot.appendChild(sub1); 
40. vroot.appendChild(sub2); 
41. vroot.appendChild(sub3); 
42. vroot.appendChild(sub4); 
43.  
44. var tree = new Ext.tree.TreePanel({ 
45.     title : 'tree panel', 
46.     root : vroot, 
47.     width : 400, 
48.     height : 300, 
49.     listeners : { 
50.         afterrender : function(p) { 
51.             var root = p.getRootNode(); 
52.             root.expand(); 
53.             var children = root.childNodes; 
54.             Ext.each(children, function(child) { 
55.                 if (!child.isLeaf()) { 
56.                     child.expand(); 
57.                 } 
58.             }); 
59.         } 
60.     } 
61. }); 
62. tree.render(document.body); 

 8、Array数组操作： Ext.each

1. Ext.each(children, function(child) { 
2.                 if (!child.isLeaf()) { 
3.                     child.expand(); 
4.                 } 
5.             }); 

 

 9、tree总结

隐藏根节点：使用TreePanel中的rootVisible : false

展开所有：TreePanel的expandAll();

收起所有：collapseAll()

10、form回显

1. Ext.Ajax.request({ 
2.                         url : '../../server/getServerById.do', 
3.                         params : { 
4.                             serverId : serverId 
5.                         }, 
6.                         success : function(response, opts) { 
7.                             console.log(response); 
8.                             var data = Ext.decode(response.responseText).data[0]; 
9.                             server.getComponent(0).getForm().setValues(data); 
10.                         }, 
11.                         failure : function(response, opts) { 
12.                             Ext.Msg.alert("info", "获取server失败"); 
13.                         } 
14.             }); 

11、将textfield变灰

//disabled:true， 不可提交

readOnly : true, 

style : "background: #C1C1C1;" 

12、表单重置与设置

重置：

1. text : 'reset', 
2. handler : function() { 
3.     fpanel.getForm().reset(); 
4. } 

设值：

1. text : 'set value', 
2. handler : function() { 
3.     fpanel.getForm().setValues([ { 
4.         id : 'name', 
5.         value : 'zhangsan' 
6.     }, { 
7.         id : 'age', 
8.         value : '15' 
9.     }, { 
10.         id : 'description', 
11.         value : 'my name is zhangsan!' 
12.     } ]); 
13. } 

查找值：

1. text : 'find value', 
2. handler : function() { 
3.     var nameValue = fpanel.getForm().findField('name').getValue(); 
4.     alert(nameValue); 
5. } 

13、远程获取数据

servlet：

含中文的先设置字符集：response.setCharacterEncoding("utf-8");

1. response.getWriter() 
2.                     .write("{success:true,msg:'成功',data : {name : 'lisi', age :'20',description : 'i am lisi!'}}"); 

【注意】格式为：{success:true,msg:'成功',data : {name : 'lisi', age :'20'}}，其中：success、data为关键字

前端load数据：

1. text : 'load value from remote', 
2. handler : function() { 
3.     fpanel.getForm().load({ 
4.         url : 'LoginServlet', 
5.         params : { 
6.             appId : 5 
7.         } 
8.     }) 
9. } 

14、启动即加载：监听afterrender事件

1. listeners : { 
2.             'afterrender' : function() { 
3.                 fpanel.getForm().load({ 
4.                     url : 'LoginServlet', 
5.                     params : { 
6.                         appId : 5 
7.                     }, 
8.                     success : function(response, responseText) { 
9.                         Ext.Msg.alert('success', responseText.msg); 
10.                     }, 
11.                     failure : function(response, responseText) { 
12.                         Ext.Msg.alert('fali', responseText.msg); 
13.                     } 
14.                 }) 
15.  
16.             } 
17.         }

15、动态刷新grid内容

在成功之后，再次调用search方法，将grid的内容再次查询一遍。

16、combo显示和传递不同的值的处理

1. var listKey = new Ext.form.ComboBox({ 
2.                     fieldLabel : '名单类型', 
3.                     //name : 'listKey', 
4.                     width : 130, 
5.                     typeAhead : true, 
6.                     triggerAction : 'all', 
7.                     lazyRender : true, 
8.                     mode : 'local', 
9.                     allowBlank : false, 
10.                     store : new Ext.data.ArrayStore({ 
11.                                 fields : ['listKeyDisplay', 'list_Key'], 
12.                                 data : [ ['all', ''],['ip', 'ip'], ['cookie', 'cookie'],['__last_loginid__', '__last_loginid__']] 
13.                             }), 
14.                     hiddenName:'listKey', 
15.                     displayField : 'listKeyDisplay', 
16.                     valueField : 'list_Key', 
17.                     listeners:{ 
18.                         afterrender: function(thiz) { 
19.                             thiz.selectText('all'); 
20.                         } 
21.                     } 
22.                 }); 

【注意】hiddenName必须有，否则传递display的值； 设置value的值传递无效为display值，所以使用afterrender进行设值

17、提交表单

方法1：通过获取button，在增加的click事件中使用ajax请求，在request可以增加form属性，获取表单的参数进行提交。

方法2：通过获取form这个组件进行submit操作

 

本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/828392，如需转载请自行联系原作者