ExtJs 常用代码片段（7.30更新）
笔者工作中用到的功能，以及一些小功能，贴出来跟大家分享。
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: 25 store: 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')}];
这样页面上显示的时间就是格式化之后的格式了。
--先记录这么多，日后工作再逐渐添加--