ExtJs 常用代码片段
1、grid加载时候选择一行或全选:
为stroe添加load事件,调用sm的selectAll方法
store.on("load",function(store) {sm.selectAll();});
选择一行或多行和以调用selectRow、selectRows或selectRecords等方法,在api中有详细介绍。
2、Extjs 中调用Ajax
Ext.Ajax.request({url:'xxx.action',method:'post',params:{equipmentId: equipmentId,agentIds: agentIds},success:function(response,config){var json = Ext.util.JSON.decode(response.responseText); Ext.Msg.alert("提示信息",json.msg);store.reload();},failure:function(){Ext.MessageBox.alert("提示信息", "关联失败"); store.reload();} });
3、form中的下拉框
var tankType = new Ext.form.ComboBox({typeAhead: true,triggerAction: 'all',lazyRender:true,mode: 'remote',applyTo :'tankType',id:'tankType',disabled:true,msgTarget : 'side',width:135,editable:false,store: new Ext.data.Store({ //下拉框的数据源 proxy: new Ext.data.HttpProxy({url:'${ctx}/tankfarm/getTankTypes.action'}),reader: new Ext.data.JsonReader({},[ {name:'type_code'}, {name:'type_name'} ])}),valueField: 'type_code',//值字段displayField: 'type_name'//显示的字段
});
4、form中的单选框
{xtype: 'radiogroup',layout: 'table',width: 100,id: 'is_main_line',fieldLabel: '主侧线',defaultType: 'radio',border: false,sFormField: true,items: [{name: 'is_main_line',//这里加入name表示两个radio属于同一个组,形成单选模式,如果不加name或者两个name不一样,则会发生两个都会选择的情况boxLabel: '是',xtype: 'radio',inputValue: '1',//单选框的实际值checked: true}, {name: 'is_main_line',boxLabel: '否',xtype: 'radio',inputValue: '2'}]
}
5、editgrid获取修改后的数据:
//得到修改过的Recored的集合
var modified = tankDataStore.modified.slice(0);
//将数据放到另外一个数组中
var jsonArray = []; Ext.each(modified,function(m){ //m.data中保存的是当前Recored的所有字段的值json,不包含结构信息 jsonArray.push(m.data);
});
6、grid添加单元格悬浮显示内容,方法为在cm中header添加renderer事件,将value完整显示,代码如下:
{header:'名称',width:50,dataIndex:'name',menuDisabled:true,menuDisabled:true,renderer : function(value, metadata, record, rowIndex, columnIndex,store) {value = value.replace(/</g,'<');metadata.attr = 'ext:qtip="' + value + '<br/>"';return value;}
}
7、分页工具栏
new Ext.PagingToolbar({pageSize: 25store: store,id:'pagger',displayInfo: true,displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',emptyMsg: "当前查询条件无数据,请重新查询"})
8、树节点右键菜单
首先建立菜单Menu,代码如下:
var materialMenu = new Ext.menu.Menu({items : [{text : "增加",id : 'add',handler : function() {}},{ text : "修改",id : 'update',handler : function() {}},{text : "删除",id : 'delete',handler : function() {}}]
});
然后为树添加监听器:
listeners : {'contextmenu' : function(node, event) {materialMenu.showAt(event.getPoint());}
}
这样在树节点上右击就可以弹出菜单了,不过为了不和ie右键冲突,最好是禁用了ie的右键菜单,具体怎么禁用就不详细说明了。 9、grid单元格添加图片和超链接第一种方法是使用Ext.grid.column.Action 动作列详细可见我的另一篇文章中有介绍http://www.cnblogs.com/lslvxy/archive/2013/05/26/3099768.html第二中方法是使用简单的列,并添加renderer函数,在renderer中可以返回一个html标签,类似
return "<span style='color:#00A600;'>下载文档</span>",
这样表格中就可以显示一个超链接或者按钮等组件。然后给grid添加单元格点击cellClick事件,
function cellClick(grid, rowIdx, colIdx, e) {
var value= e.getTarget().value;//获取renderer中返回的标签值
//e.getTarget().innerHTML 获取renderer中返回的标签内的文本
record = grid.getStore().getAt(rowIdx);
row = grid.getSelectionModel().getSelected(); //得到选择所有行
var fieldName = grid.getColumnModel().getDataIndex(colIdx); // 获取列名
var data = record.get(fieldName);//这个data就是点击的单元格的数据了,一定有用的
}
10、grid隔行变色(6.21添加)
先自定义一个CSS: <style type="text/css"> .my_row_Red table{ background:Red}
.my_row_Green table{ background:Green} </style>
然后在GridPanel里这样写:
viewConfig : {getRowClass : function(record,rowIndex,rowParams,store){if(rowIndex%2==0){return 'my_row_Red';}else{return 'my_row_Blue';}} }
这样就可以使得表格隔行变色了,在加载的时候就显示不同的颜色了。
11、
json返回值为多行数据,可是在grid中只显示一行。
原因: store将某些具有相同值的字段记录合并为一行。
解决: 设置idProperty
var store = Ext.create('Ext.data.Store', {
model: 'queryDetail',
proxy: {
type: 'ajax',
url: 'queryDetail.action',
timeout: 120000,
reader: {
type: 'json',
totalProperty: 'total',
idProperty: 'callTime',//该属性是指定每一个行对象中究竟哪一个是记录的ID字段(可选的)设置为不重复的字段即可
root: 'root'
}
}
});
12:
extjs实现类似百度搜索框一样的效果,输入一个文本联想内容
这个实现的方法其实就是一个下拉框,把下拉框做成可编辑的,再把尾部的下拉小三角隐藏起来效果就像是一个文本框,再添加keyup事件,监听输入内容查询数据库即可得到类似的结果
{fieldLabel:"位号" ,id:"updateLocationNo",msgTarget: 'side',allowBlank: false,blankText: "不能为空",xtype : 'combo',emptyText : '输入位号...',hideTrigger : true,selectOnFocus : false,editable : true,valueField : 'name',displayField : 'name',mode : 'remote',triggerAction : 'all',loadingText : '加载中...',store : new Ext.data.Store({url : '${ctx}/alarm/getAllLocation.action',reader : new Ext.data.JsonReader({},[{name : 'name',type : 'string'},{name : 'id',type : 'string'}])}),listeners:{'keyup':function(comb,event){var keyWord = Ext.get('updateLocationNo').dom.value;if(keyWord!=''){comb.store.setBaseParam('keyWord',keyWord);comb.store.load();}}}
代码在上面,这样就可以实现效果了。
13:extjs中grid显示java.util.Date类型数据
之前用Mybatis时间都是用string类型存储的到页面上显示就比较简单了,现在换成hibernate了date类型直接显示在页面上是[Object,Obecjt],
通过json转换后date的格式为:alarmDate":{"nanos":0,"time":1375089398000,"minutes":16,"seconds":38,"hours":17,"month":6,"timezoneOffset":-480,"year":113,"day":1,"date":29}
这样不好直接显示。有两种方法解决,
第一种是在后台转换的时候通过JsonValueProcessor 将date类型格式化,具体操作就不详细说明了,百度一下就有。
第二种方法不需要在后台处理,在extjs中的Recode添加属性:
{name: "alarmDate",mapping:"alarmDate.time",type:"date",dateFormat :"time"}说明该属性是一个date类型,
然后再cm中添加renderer事件
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')//格式可以自己设定为需要的格式。
完整代码如下:
Ext.define("alarmHistory",{extend:"Ext.data.Model",fields:[{name: "alarmDate",mapping:"alarmDate.time",type:"date",dateFormat :"time"}]});var cm=[{header: "报警时间",width: 200,dataIndex: alarmDate",menuDisabled: true,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}];
ExtJs 常用代码片段相关推荐
- ExtJs 常用代码片段(7.30更新)
笔者工作中用到的功能,以及一些小功能,贴出来跟大家分享. 1.grid加载时候选择一行或全选: 为stroe添加load事件,调用sm的selectAll方法 store.on("load& ...
- 前端常用代码片段(四)
前端常用代码片段(一) 点这里 前端常用代码片段(二) 点这里 前端常用代码片段(三) 点这里 前端常用代码片段(四) 点这里 前端常用代码片段(五) 点这里 前端常用代码片段(六) 点这里 1.简述 ...
- Jquery学习总结(1)——Jquery常用代码片段汇总
1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){ $(document).bind("contextmenu",fun ...
- iOS开发常用代码片段:总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
- 分享前端开发常用代码片段
分享开发中常用的一些 代码片段,我们的目标是早下班.不加班,哈哈~~ 1.手机号隐藏中间4位 //手机号脱敏 function mobile(data) {return data.replace(/( ...
- js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
- Objective C 常用代码片段制作(code snippet library)
最近发现了一个比较好的东西,就是XCode提供的一个片段制作工具(code snippet library),主要作用就是可以省去我写一些经常使用的代码的麻烦 比如我经常使用的注释,实例化对象等的一些 ...
- 前端常用代码片段(二)
1.简述一下你对HTML语义化的理解?并写出一段语义化的HTML? 语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器 ...
- 【整理】【精华】【实用】常用代码片段
//替代绑定模板数据________________________.replace(/{形参}/g, 实参);html += tpl.replace(/{形参}/g, 实参); //for循环___ ...
最新文章
- LeetCode:937. Reorder Log Files
- 华为企业管理经典案例_企业税务筹划-华为公司税筹案例分析
- 深度学习中Flatten层的作用
- [转]为什么Java中的HashMap默认加载因子是0.75
- Qt探索之路——获取QTextEdit文本内容
- 分库分表的几种常见形式以及可能遇到的难题--转
- TSQL查询内幕::(2.3)查询计划与更新计划
- Linux下Weblogic 11g R1安装和配置
- html2canvas在手机不行,html2canvas - 在iOS设备上崩溃
- java输出横纵坐标点_java编程 知道坐标求三角形 做了一部分题目要求写出一个Point(点)类,该类具有x,y(表示点的横、纵坐标)两个属...
- hibernate框架 最新_Java 15 个框架
- iOS下载文件,保存路径. 防止加到iCloud备份
- 什么样的简历,面试官一看就知道多少水份!!!
- 声音加速_车子换机油后噪音变大加速无力,到底是什么原因,不少车主吃过亏...
- 使用IntelliJ IDEA和Maven构建Java web项目并打包部署
- 路在脚下,何去何从?
- 绕过 iOS 代码签名验证 ldid
- 关于上位机和下位机的一些解释
- 使用loadrunner javavuser协议开发脚本实战
- 买车容易行路难-买车