extjs 应用总结
从开始接触、运用ExtJS已经有一个月左右的时间了，开始接触时感觉很有难度，本身对javaScript就没多少兴趣。迫于工作的压力也坚持了下来，也在这一个月的时候开发了几个小应用，慢慢的发现在ExtJS还是比较好用的。功能也很强大。对于这种组件式的编程上手也没想象中的难。使用版本3.2，不过对于Tree这一块接触的不是很多，理解也不是很深刻。

不过有需要的朋友，可以留个邮箱，我可以把文档发过去！共同进步

一. GridPanel
/**
*给grid添加复选框
**/
var sm = new Ext.grid.CheckboxSelectionModel();
/**
*数据解析器,name与mapping相同时，可以省略mapping
**/
var xmlReader = new Ext.data.XmlReader({
record : 'row',
totalProperty : 'results',
idProperty : 'ROLEID',
fields : [{
name : 'roleid',
mapping : 'ROLEID'
}, {
name : 'rolename',
mapping : 'ROLENAME'
},{
name : 'CREATETIME',
                type : 'date',
                dateFormat : 'Y-m-d'
                         }]
});
/**
*数据源
**/
var store = new Ext.data.Store({
autoLoad : true,
url : 'system/roleStore.action',
reader : xmlReader
});
/**
*列模型   
**/
var cm = new Ext.grid.ColumnModel([sm, {
header : '角色代码',
dataIndex : 'roleid'
}, {
header : '角色名称',
dataIndex : 'rolename'
}]);
/**
*扩展 grid  (repairHtml 可以定义扩展的样式)
*/
var expander = new Ext.ux.grid.RowExpander( {
tpl : new Ext.Template(repairHtml)
});
/**
*组合成grid
**/
var grid = new Ext.grid.GridPanel( {
cm : cm,
viewConfig : {
forceFit : true  //自动选择列宽
},
plugins : expander,
store : store,
id : 'query_repair_grid_id',
border : false,
region : 'center',
stripeRows : true,
bbar : new Ext.PagingToolbar( {
displayInfo : true,
store : store,
plugins : new Ext.ux.grid.PageSize()
}),
tbar : [ "-", {
text : '查询',
iconCls : 'search-icon',
handler : this.doQuery.createDelegate(this)
}, "-" ]
});
二. EditorGridPanel
组装editorGrid与grid基本差不多，如果要设置可以编辑列可以如下设置：
/**
*设可编辑列，如红色标识处，加editor属性
**/
var cm = new Ext.grid.ColumnModel( [ {
header : "材料类别名称",
dataIndex : 'CATALOGNAME',
sortable : true
}, {
header : "材料名称",
dataIndex : 'NAME',
sortable : true
}, {
header : "材料数量",
dataIndex : 'MATERIALAMOUNT',
editor : new Ext.form.NumberField( {
allowBlank : true,
maxValue : 100
})
} ]);
/**
*监听可编辑列，如红色属性标记处
**/
listeners : {
activate : function(p) {
this.store.load();
},
afteredit : this.afterEdit.createDelegate(obj)
}
/**
*afteredit函数
**/
afterEdit : function(obj) {
var row = obj.record;
var materialid = row.id;
var value = obj.value;
var repairid = this.repairid;
var self = this;
Ext.Ajax.request( {
url : _ctx.base + '/BuildingRepairMaterial/savaBuildingMaterial.action',
params : {
materialid : materialid,
amount : value,
repairid : repairid
},
success : function(response, opts) {
self.editWindow.stroe.load();
}
});
}
三. 查询GridPanel
1. 按数据库字段查询
/**
* 往GridPanel的store中监听发beforeload事件
* values是获得所有查询条件值
**/
listeners : {
'beforeload' : function() {
var values = self.formPanel.getForm().getValues();
getQueryParams(values, this.baseParams);
}