筆者工作中用到的功能，以及一些小功能，貼出來跟大家分享。
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')}];
這樣頁面上顯示的時間就是格式化之后的格式了。
--先記錄這么多，日后工作再逐漸添加--