EXTJS

最新推荐文章于 2024-07-29 11:32:06 发布
最新推荐文章于 2024-07-29 11:32:06 发布
阅读量92 收藏
点赞数
文章标签： EXT json UI iBATIS 应用服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvdong5830/article/details/83949082
版权

ExtJS 技巧笔记

文章分类:Web前端

Js代码   收藏代码
  1. Ext.fly(grid.getView().getRow(0)).slideIn( 't' );      //选择第一条有从上往下的插入效果   
  2. Ext.fly(grid.getView().getRow(0)).frame('#cadaf9' ,3); //选择一条记录带蓝色光晕效果   
  3. enableKeyEvents:true   //激活键盘事件 ,TextField 的键盘事件默认是关闭的   
  4. cmp.el.mask('正在发送...' ,  'x-mask-loading' );   //给组件上遮罩   
  5. cmp.el.unmask();                              //隐藏遮罩   
  6. this .previousSibling(); //当前组件的前一个组件（同一个容器）   
  7. this .nextSibling();     //当前组件的后一个组件（同一个容器）   
  8.   
  9. //给组件增加快捷键（CTRL + 回车）   
  10. {  
  11.     xtype: 'textarea' ,  
  12.     listeners: {  
  13.         'render' :  function  (input) {  
  14.             new  Ext.KeyMap(input.getEl(), [{  
  15.                 key: 13,  
  16.                 ctrl: true ,  
  17.                 fn: function  () {},  
  18.                 scope: this   
  19.             }]);  
  20.         }  
  21.     }  
  22. }  


Java代码   收藏代码
  1. //在分页组件前面添加组件   
  2. var page = new  Ext.PagingToolbar({  
  3.     store: store,  
  4.     displayInfo: true ,  
  5.     pageSize: 10   
  6. });  
  7. page.insert(0 ,  '-' );  
  8. page.insert(0 , {    //添加一个日期组件   
  9.     xtype: 'datefield' ,  
  10.     name: 'chatdate' ,  
  11.     format: 'Y-m-d' ,  
  12.     value: new  Date()  
  13. });  



效果如图如下

Js代码   收藏代码
  1. //XTemplate的使用示例（读取store加载的数据来渲染）   
  2. {"root" :[{ "date" : "2009-09-07T15:52:45" , "sender" : "廖瀚卿" , "text" : "你好asdf" },{ "date" : "2009-09-07T15:52:51" , "sender" : "asdf" , "text" : "你好廖瀚卿" },{ "date" : "2009-09-07T15:52:59" , "sender" : "asdf" , "text" : "我这个是测试的，你那里能看到吗？" },{ "date" : "2009-09-07T15:53:09" , "sender" : "廖瀚卿" , "text" : "能看到，很不错哦：）" },{ "date" : "2009-09-07T15:53:23" , "sender" : "asdf" , "text" : "鸭版斑斑啦" },{ "date" : "2009-09-07T15:53:31" , "sender" : "廖瀚卿" , "text" : "呵呵，你真搞笑" },{ "date" : "2009-09-07T15:53:45" , "sender" : "廖瀚卿" , "text" : "对了。你好吗？\n" },{ "date" : "2009-09-07T15:53:52" , "sender" : "asdf" , "text" : "我很好，真的：）" },{ "date" : "2009-09-07T15:54:00" , "sender" : "asdf" , "text" : "你好不好，告诉我啊" },{ "date" : "2009-09-07T15:54:06" , "sender" : "廖瀚卿" , "text" : "我也很好：0" }], "success" : true , "totalProperty" :10}  
  3. //以上是store加载时火狐检测的json字符串，我们可以监听store的load事件来做XTemplate的渲染   
  4.   
  5. var  tpl =  new  Ext.XTemplate(  
  6.     '<tpl for=".">' ,   
  7.     '<font color="{[xindex % 2 === 0 ? "green" : "red"]}"><p>{data:this.parseSender()}: {data:this.parseDate} </p></font>' ,   
  8.     '<p style="padding:1 1 10 5">{data:this.parseText}</p>' ,  '</tpl></p>' ,   
  9.     {  
  10.         compiled: true ,  
  11.         parseSender: function  (json) {  
  12.             return  json.sender;  
  13.         },  
  14.         parseDate: function  (json) {  
  15.             return  Ext.util.Format.date(json.date,  'Y-m-d H:i:s' );  
  16.         },  
  17.         parseText: function  (json) {  
  18.             return  json.text  
  19.         }  
  20.     }  
  21. );  
  22.   
  23. var  store =  new  Ext.data.Store({  
  24.     url: 'findChatHistory.action' ,  
  25.     reader: new  Ext.data.JsonReader({  
  26.         totalProperty: 'totalProperty' ,  
  27.         root: 'root'   
  28.     },  
  29.     ['mid' ,  'id' ,  'sender' ,  'text' , {  
  30.         name: 'date' ,  
  31.         dateFormat: "Y-m-dTH:i:s" ,  
  32.         //struts2的json-plugin处理日期默认格式化为这种方式，要想在extjs中正确处理日期格式，这里很重   
  33.         type: 'date'   
  34.     }]),  
  35.     listeners: {  
  36.         'load' :  function  (sd, records, options) {  
  37.             /*console.log(records);//其实records是一个对象数组，输出内容和格式如下,从格式可以得知真正的数据在data=Object里面  
  38.  [Object phantom=true id=ext-record-26 data=Object, Object phantom=true id=ext-record-27 data=Object, Object phantom=true id=ext-record-28 data=Object, Object phantom=true id=ext-record-29 data=Object, Object phantom=true id=ext-record-30 data=Object, Object phantom=true id=ext-record-31 data=Object, Object phantom=true id=ext-record-32 data=Object, Object phantom=true id=ext-record-33 data=Object, Object phantom=true id=ext-record-34 data=Object, Object phantom=true id=ext-record-35 data=Object]*/   
  39.             tpl.overwrite(Ext.fly('history' ), records);  //records为服务器返回的所有记录   
  40.         }  
  41.     }  
  42. });  


Js代码   收藏代码
  1. //变换元素大小以及动画的特效   
  2. function  scaleElement(id) {  
  3.     var  el = Ext.get(id);  
  4.     el.scale(el.getWidth() /1.2,el.getHeight() /1.2,{  
  5.         easing: 'backBoth' , //膨胀效果(先变大,再变得小于目标尺寸,最后恢复目标尺寸)   
  6. //        easing: 'backIn',//膨胀效果(先变得大于目标尺寸,最后恢复目标尺寸)   
  7. //        easing: 'backOut',//膨胀效果(先变得小于目标尺寸,最后恢复目标尺寸)   
  8. //        easing: 'bounceBoth',//来回大小振动后恢复目标尺寸   
  9. //        easing: 'bounceIn',//来回大小振动后恢复目标尺寸(变大动作幅度大一点)   
  10. //        easing: 'bounceOut',//来回大小振动后恢复目标尺寸(变小动作幅度大一点)   
  11. //        easing: 'easeBoth',//就是尺寸变了.没感觉出来特别的   
  12. //        easing: 'easeIn',//就是尺寸变了.没感觉出来特别的   
  13. //        easing: 'easeInStrong',//就是尺寸变了.没感觉出来特别的   
  14. //        easing: 'easeOut',//就是尺寸变了.没感觉出来特别的   
  15. //        easing: 'easeBothStrong',//就是尺寸变了.没感觉出来特别的   
  16. //        easing: 'easeNone',//轻轻的就缩小了   
  17. //        easing: 'elasticBoth',//感觉很有动力   
  18. //        easing: 'elasticIn',//感觉很有动力   
  19. //        easing: 'elasticOut',//感觉很有动力   
  20.         duration: .35  
  21.     });  
  22. }  


Js代码   收藏代码
  1. //2009-10-9 23:57:18   
  2. //对象属性写法记忆,下面是分页组件里面的一个私有方法   
  3. // private   
  4. doLoad : function (start){  
  5.     var  o = {}, pn =  this .getParams();  
  6.     o[pn.start] = start;  
  7.     o[pn.limit] = this .pageSize;  
  8.     if ( this .fireEvent( 'beforechange' ,  this , o) !==  false ){  
  9.         this .store.load({params:o});  
  10.     }  
  11. }  
  12. //其中 o[pn.start] 等同于 o.start,也就是说o[pn.start]等同于o['start']   
  13. //o['page.params.manager'] 这种写法是有效的,而o.page.params.manager却不一定正确   


Js代码   收藏代码
  1. // 2009-10-17 0:10:20   
  2. //回调函数应用   
  3. //extjs给我们提供的方法都很人性化,有很多方法都有回调函数,但是有些方法却没有,我们可以自己定义我们的回调函数   
  4. var  data = {  
  5.     name: 'Jack Slocum' ,  
  6.     title: 'Lead Developer' ,  
  7.     company: 'Ext JS, LLC' ,  
  8.     email: 'jack@extjs.com' ,  
  9.     address: '4 Red Bulls Drive' ,  
  10.     city: 'Cleveland' ,  
  11.     state: 'Ohio' ,  
  12.     zip: '44102' ,  
  13.     drinks: ['Red Bull' ,  'Coffee' ,  'Water' ],  
  14.     kids: [{  
  15.         name: 'Sara Grace' ,  
  16.         age:3  
  17.     },{  
  18.         name: 'Zachary' ,  
  19.         age:2  
  20.     },{  
  21.         name: 'John James' ,  
  22.         age:0  
  23.     }]  
  24. };  
  25. var  tpl =  new  Ext.XTemplate(  
  26.     '<p>Name: {name}</p>' ,  
  27.     '<p>Title: {title}</p>' ,  
  28.     '<p>Company: {company}</p>' ,  
  29.     '<p>Kids: ' ,  
  30.     '<tpl for="kids">' ,  
  31.         '<p>{name}</p>' ,  
  32.     '</tpl></p>'   
  33. );  
  34. tpl.overwrite(panel.body, data);  // overwrite方法没有给我们提供回调函数   
  35.   
  36. //自定义处理方法   
  37. function  myFunction(tpl,el,data,callback){  
  38.     tpl.overwrite(el,data);  
  39.     callback();  //调用回调函数   
  40. }  
  41.   
  42. //执行我们自定义的方法   
  43. myFunction(tpl,panel.body,functioin(){  
  44.     alert('哈哈我执行完了,我是回调函数' );  
  45. });  
  46.   
  47. //延迟执行自定义回调函数   
  48. myFunction(tpl,panel.body,(function (){  
  49.      alert('哈哈我延迟2秒后执行的回调函数' );  
  50.   }).defer(2000);  
  51. );  
  52. //ibatis笔记   
  53. #remark:VARCHAR# remark必须是数据库中的字段才能用:VARCHAR来表示类型   


Js代码   收藏代码
  1. //表单里面显示图片 2009-11-10 11:01:04   
  2. {  
  3.     xtype: 'box' ,  
  4.     anchor: '' ,  
  5.     isFormField: true ,  
  6.     fieldLabel: 'Image' ,  
  7.     autoEl: {  
  8.         tag: 'div' ,  
  9.         children: [{  
  10.             tag: 'img' ,  
  11.             qtip: 'You can also have a tooltip on the image' ,  
  12.             src: 'http://extjs.com/deploy/dev/examples/shared/screens/desktop.gif'   
  13.         },  
  14.         {  
  15.             tag: 'div' ,  
  16.             style: 'margin:0 0 4px 0' ,  
  17.             html: 'Image Caption'   
  18.         }]  
  19.     }  
  20. }  


Js代码   收藏代码
  1. //GridPanel 行编辑器(combo)显示问题 2009-11-10 13:13:33   
  2. //GridPanel/EditorGridPanel中下拉框显示的问题,从后台取值或者前台选择下拉值以后不显示我们制定的DisplayField的value而现实了ValueField的value,做如下处理即可解决   
  3. var  index = store.indexOf(grid.getSelectionModel().getSelected());  
  4. var  columns = grid.getColumnModel().getColumnsBy( function (c){  
  5.     return  c.dataIndex ==  'vbid' ;  //ValueField 获得下拉框的列   
  6. });  
  7. var  _editor = columns[0].getCellEditor(index);  //获得下拉框   
  8. var  valueFieldValue = _editor.field.getValue();  //获得id值   
  9. var  displayFieldValue = _editor.field.getRawValue();  //获得显示值   
  10.   
  11. //这样我们就可以在编辑行或者添加行的时候向后台同事传递两个value   
  12. //而解决前天总显示id的问题只要写个renderer就可以了   
  13.   
  14. renderer:function (value, cellmeta, record){  
  15.     return  record.data.brandName; //在有下拉选择框的地方显示DisplayField的value   
  16. }  


Js代码   收藏代码
  1. //树节点(TreeNode)图标动态修改 2009-11-22 15:36:52   
  2. var  ui = node.getUI();  
  3. ui.removeClass('x-tree-node-leaf' );  //去掉之前的根节点样式   
  4. ui.addClass('x-tree-node-expanded' );  //设定已展开文件夹样式    
  5. //ui.addClass('x-tree-node-collapsed');//设定合并的文件夹样式   



2010年6月27日22:25:06
又爱又恨的 Ext.form.ComboBox 之 id,hiddenId,name,hiddenName正确用法.

Js代码   收藏代码
  1. {  
  2.     fieldLabel: '材质' ,   //标签名   
  3.     xtype: 'combo' ,    
  4.     valueField: 'stuffid' ,   //对应store中的field   
  5.     displayField: 'stuffName' ,  //对应store中的field,就是说下拉列表中显示store中这个字段的值   
  6.     queryParam: 'stuff.stuffName' ,  //自动完成功能传到后台的查询条件名字   
  7.     typeAhead: true ,  
  8.     triggerAction: 'all' ,  
  9.     minChars: 1,  //自动完成功能一个字符就开始出发查询动作   
  10.     listWidth: 250,  //下拉列表的宽度   
  11.     allowBlank: false ,  //不能为空   
  12.     selectOnFocus: true ,  //获得焦点就下拉   
  13.     pageSize: 10,  //下拉列表分页   
  14.     id: 'materials.stuffName' ,   //当前下拉框的id    
  15.     name: 'materials.stuffName' ,   //当前下拉框的name   
  16.     hiddenId: 'materials.stuffid' ,   //隐藏域的id   
  17.     hiddenName: 'materials.stuffid' ,  //隐藏域的name   
  18.     submitValue:true ,   //当前下拉框中显示的文本是否提交   
  19.     value: materials.stuffName, /当前表单存储的是名字  
  20.     hiddenValue:materials.stuffid,//隐藏域存储的是id   
  21.     ref: '../../../../comboStuff' ,  //方便他父容器引用   
  22.     store: {  
  23.         xtype: 'store' ,  
  24.         url: 'findStuffList.action' ,  
  25.         paramNames: {  
  26.             start: 'page.start' ,  
  27.             limit: 'page.limit'   
  28.         }, baseParams: {  
  29.             'page.start' : 0,  
  30.             'page.limit' : 10  
  31.         }, reader: new  Ext.data.JsonReader({  
  32.             totalProperty: 'totalProperty' ,  
  33.             root: 'root'   
  34.         }, [{  
  35.             name: 'stuffid'   //对应valueField   
  36.         }, {  
  37.             name: 'stuffName'   //对应displayField   
  38.         }])  
  39.     }  
  40. }  



以上代码会在表单中生成如下html代码

Html代码   收藏代码
  1. < div   class = "x-form-field-wrap x-form-field-trigger-wrap "   id = "ext-gen134"   
  2. style = "width: 162px;" >   
  3.     < input   type = "hidden"   id = "materials.stuffid"   name = "materials.stuffid"   value = "1" > <!-- 对应hiddenId,hiddenName存储valueField的值-->   
  4.     < input   type = "text"   id = "materials.stuffName"   autocomplete = "off"   size = "24"   
  5.     class = " x-form-text x-form-field "   style = "width: 145px;"   title = "" > <!-- 对应ni,name存储displayField的值 -->   
  6.     < img   class = "x-form-trigger x-form-arrow-trigger"   src = "../resources/images/default/s.gif"   
  7.     id = "ext-gen135" >   
  8. </ div >   
lvdong5830
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJs项目创建
pathconquer的博客
06-29 413
官方网站：（国外网站比较慢） https://www.sencha.com/products/extjs/ 快速开始创建一个简单的ExtJS项目。 第一步：找到文档。 第二步：点击get started 第三步：npm方式下载ExtJS 全过程解析 （1）npm install -g @sencha/ext-gen npm:包管理工具，下载node.js附带。 -g表示全局安装 @sencha/ext-gen应该是安装sencha组件中ext-ge...
ExtJS 7.6 SDK trial
10-03
ExtJS 是一个流行的JavaScript框架，用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API，使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新，...
ExtJS的View部分的基本操作
weixin_33866037的博客
01-08 486
先上代码我们在View的ViewController文件中进行测试，纯属为了方便。 Ext.define('RUKU.view.main.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onItemSelected: ...
ExtJs学习笔记
对雪书空武
09-01 225
&#13; 官网：http://docs.sencha.com/extjs/6.5.1/classic/Ext.html示例demo：https://fiddle.sencha.com/#view/editor&amp;fiddle/255l 密码:k2ExtJS1、主要控件：Application、View，ViewModel，Controller，Component，St...
ExtJs控件属性配置详细
weixin_34233618的博客
08-27 431
序言：    1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴（不足之处，以后项目用到时再续完善）。 Ext.form.TimeField:   配置项：            maxValue：列表中允许的最大时间            maxText：当时间大于最大值时的错误提示信息            minValue：列表中允许的最小时间        ...
跟我一起学extjs5(04--MVVM特性的简单说明)
热门推荐
jfok的专栏
06-30 3万+
跟我一起学extjs5(04--MVVM特性的简单说明) 下面我们来看一下自动生成的代码中的ＭＶＶＭ架构的关系。Main是一个可视的控件，MainController是这个控件的控制类，MainModel是这个控件的模型类。 在上面的图片中，左边是Main.js中的代码，右边是MainController.js 和 MainModel.js中的代码，可以
EXTJS 定时器
JouZheYang的博客
11-14 1397
EXTJS 定时器
Extjs日期操作
冯晓东——java,activiti
01-03 819
Extjs日期操作 Extjs操作日期是很麻烦的事情,现总结如下: Extjs日期转化为字符串: Ext.Date.format(new Date(), ‘Y-m-d’); 字符串转日期 var str = “20190103”; Ext.Date.parse(str,’'Ymd"); 综合练习, 例如: 20130909000000 转化为 2013-06-06 00:00:00 实现: ...
Extjs 4.2.2
03-28
Ext JS 4.2.2 完整包 gpl license API，文档等 Ext JS 4.2.2 完整包 gpl license API，文档等
Extjs6.7.0
04-26
Extjs6.7.0 只上传了核心js文件,其它文件暂时不能上传,只能用于测试和学习,请务商用!
精通ExtJS
05-09
精通ExtJS
ExtJs之Ext.view.View
weixin_33830216的博客
05-16 378
要注意MODEL的定义和实例化的代码，注释掉的是老式的不兼容4.0以上的。而下面的定义才是新推荐的。 我网上可是查的了。是书上的代码老了。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...
ExtJs知识点概述
晨港飞燕的专栏
06-29 1万+
1.前言 ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进，ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基础库之一,利用ExtJS构建的WEB应用具有与桌面程序一样的标准用户界面和操作方式，并能够跨不同的浏览器平台使用。 就目前的市场趋势，现在用户对体验的要求越来越高。涌现出很多优秀的前台java
Hutool——发送http请求案例
最新发布
专注写bug
07-29 572
在实际开发过程中，微服务环境下往往采取openfeign实现服务与服务之间的请求调用。但有时候需要调用第三方API的情况，虽然在spring boot 框架中提供了请求模板，但这个不怎么好用。市面上支持http调用的框架技术很多，比如okhttp等。本篇文章重点说明Hutool给我们封装的请求方法类。/*** 调用post 接口发送get请求* @return。
深入解析 Jackson 的 @JsonProperty 注解
一起coding，一起嗨。
07-29 341
深入解析 Jackson 的 @JsonProperty 注解
ExtJS4.1 中文学习手册
"EXTJS4.1中文文档，适合英语基础较弱的学习者，提供了从获取EXTJS到搭建学习环境的详细步骤，以及创建基本的HelloWorld示例的教程。" EXTJS是一个流行的JavaScript前台框架，用于构建富客户端应用程序。EXTJS4.1是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值