文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

ExtJS样例总结 -3

2023-01-31 06:57

关注

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

模态窗口：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操作

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

ExtJS样例总结 -3

后端开发2023-01-31

总结--3

后端开发2023-01-31

MySQL总结-3

后端开发2023-01-31

python 学习总结3

后端开发2023-01-30

IPSec ×××配置总结 3

后端开发2023-01-31

BGP学习 总结3

后端开发2023-01-31

Vue动态样式方法实例总结

后端开发2023-02-07

AIX 5L学习总结3

后端开发2023-01-31

java面试大总结（3）

后端开发2023-01-31

Kubernetes 学习总结(3) M

后端开发2023-01-31

jdbc学习总结3------javab

后端开发2023-01-31

Vue2中使用axios的3种方法实例总结

后端开发2024-04-02

2020年3月Android面试总结:

后端开发2022-06-06

Java 多线程学习总结3

后端开发2023-01-31

怎样进行Linux.shell总结

后端开发2023-06-06

将近3个月的实习总结

后端开发2023-01-31

Android CountDownTimer案例总结

后端开发2024-04-02

OSGi全面总结与WebSphere应用范例是怎样的

后端开发2023-06-17

Android View移动的3种方式总结

后端开发2022-06-06

Android中Intent机制详解及示例总结(总结篇)

后端开发2022-06-06
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯