http://tianya23.blog.51cto.com/1081650/813863

http://tianya23.blog.51cto.com/1081650/821649

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的功能点

模态窗口: : 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();

收起所有:()

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(); 

设值:

  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.     } ]); 

查找值:

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

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.     }) 

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操作