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);
}
}
/**
*执行查询
**/
doQuery : function() {
this.queryGrid.getStore().load();
}
/**
*设置查询值
**/
function getQueryParams(values, baseParams) {
var i = 0;
for ( var p in values) {
var ps = p.split(":");
if (!ps[1]) {
ps[1] = "string";
}
if (!ps[2]) {
ps[2] = "like";
}
var field = "filter[" + i + "][field]";
var value = "filter[" + i + "][data][value]";
var comparison = "filter[" + i + "][data][comparison]";
var type = "filter[" + i + "][data][type]";
baseParams[type] = ps[1];
baseParams[field] = ps[0];
baseParams[comparison] = ps[2];
baseParams[value] = values[p];
i++;
}
}

2. 按自设条件查询（ajax查询）
Ext.Ajax.request( {
url :’查询的url’,
params : {
repairid : id,
APPRAISESTATE : value
}
});

四. FormPanel
var queryForm = new Ext.FormPanel( {
labelAlign : 'right',
labelWidth : 70,
height : 50,
region : "north",
border : false,
frame : true,
trackResetOnLoad : true,
items : [ {
bodyStyle : "padding:5px 0 0 0",
layout : 'column',
items : [ {
columnWidth : .2,
layout : 'form',
items : [ {
xtype : 'textfield',
fieldLabel : '报修人',
name : 'CREATERNAME',
anchor : '97%'
} ]
}, {
columnWidth : .2,
layout : 'form',
items : [ {
xtype : 'textfield',
fieldLabel : '报修内容',
name : 'REPAIRCONTENT',
anchor : '97%'
} ]
}, {
columnWidth : .2,
layout : 'form',
defaultType: 'datefield',
items : [ {
vtype: 'daterange',
fieldLabel : '开始时间',
format : 'Y-m-d',
name : 'CREATETIME:date:gt',
id:'CREATETIME:date:gt',
endDateField: 'CREATETIME:date:lt',
anchor : '97%'
} ]
}, {
columnWidth : .2,
layout : 'form',
defaultType: 'datefield',
items : [ {
vtype: 'daterange',
fieldLabel : '结束时间',
format : 'Y-m-d',
id:'CREATETIME:date:lt',
name : 'CREATETIME:date:lt',
startDateField: 'CREATETIME:date:gt',
anchor : '97%'
} ]
} ]
} ]
});
1. 往FormPanel里面的组件传值
两种方式，一种直接从数据库中查找，另一种从gridpanel中传过来
 数据库中直接查找
/**
*同样也需要有数据解析器，在formpanel中添加剂   reader : formReader
**/

form.load( {
url : _ctx.base + '/buildingRepair/loadRepair.action',
params : {
repairid : r.id
},
failure : function(form, action) {
Ext.Msg.alert("错误", "error");
},
waitMsg : 'Loading'
});
 从GridPanel中直接传值
var r = this.studentVacateGrid.getSelectionModel().getSelected();
var formPanel = this.createStudentForm();
formPanel.getForm().loadRecord(r);
 渲染FormPanel列的值
/**
*列模型中添加如下代码
**/
{
header :'性别',
dataIndex :'SEX',
renderer : function(value) {
if (value == 1)
return "男";
else
return "女";
}
}

2. 提交FormPanel
/**
*在formPanel中添加URL属性列。如url : '/vacate/editVacate.action'
**/
formPanel.submit( {
success : function(response, opts) {
self.editWindow.hide();
self.studentVacateGrid.getStore().load();
}
3. 将FormPanel值置空
formPanel.getForm().reset();
4. 将FormPanel放入window弹出窗口显示
/**
*将FormPanel放入Window的items属性中即可
**/
this.editWindow = new Ext.Window( {
title :'修改请假信息',
collapsible :true,
closeAction :'hide',
maximizable :true,
width :550,
height :370,
minWidth :300,
minHeight :200,
layout :'fit',
plain :true,
bodyStyle :'padding:5px;',
buttonAlign :'center',
items :formPanel
});

五. Combobox
1. 调用本地数据
xtype : 'combo',
mode : 'local',
value : '1',
triggerAction : 'all',
forceSelection : true,
editable : false,
fieldLabel : '评价',
hiddenName : 'APPRAISESTATE',
displayField : 'name',
valueField : 'value',
anchor : '97%',
store : new Ext.data.JsonStore( {
fields : [ 'name', 'value' ],
data : [ {
name : '一般',
value : '1'
}, {
name : '好',
value : '2'
}, {
name : '很好',
value : '3'
}, {
name : '差',
value : '4'
} ]
})
2. 调用远程数据
/**
*当调用远程数据时，如果有传入默认值，应该在默认值传入formPanel之前加载完数据源
**/
this.vacateTypeStore = new Ext.data.JsonStore( {
url : '/vacate/findVacateCatalogList.action',
fields : [ 'VACATECATALOGID', 'NAME' ]
});
this.vacateTypeStore.load();

var vacateTypeCombo = new Ext.form.ComboBox( {
xtype :'combo',
store :this.vacateTypeStore,
valueField :"VACATECATALOGID",
displayField :"NAME",
forceSelection :true,
typeAhead :true,
hiddenName :'VACATECATALOGID',
editable :false,
mode : 'remote',
triggerAction :'all',
allowBlank :false,
fieldLabel :'请假类别',
anchor :'97%'
});
六. TreePanel
/**
*注意节点之间的父子关系
**/
var root = new Ext.tree.AsyncTreeNode({
text : appMeuns[i].MENUNAME,
draggable : false,
id : appMeuns[i].MENUID
});
var node = new Ext.tree.TreePanel({
title : appMeuns[i].MENUNAME,
rootVisible : false,
loader : new Ext.tree.TreeLoader({
dataUrl : '/system/meun.action'
}),
animate : true,
autoScroll : true,
containerScroll : true,
root : root
});
new Ext.tree.TreeSorter(node, {
folderSort : true
});
node.on('click', function(node, e) {
                 }
七. 开始日期与结束日期
/**
* 给所有FormPanel中含有VTYPE属性的组件添加如下事件。
* 必需给出name，如果只指定id则无效
**/
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
}
});