ExtJS样例总结 -3

发布时间：2019-09-18 07:21:29编辑：auto阅读（1805）

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

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

关键字：

上一篇： .NET 中的3C

下一篇： Python全栈开发之文件操作