转载
应用总结
文章分类:Web前端
从开始接触、运用ExtJS已经有一个月左右的时间了，开始接触时感觉很有难度，本身对javaScript就没多少兴趣。迫于工作的压力也坚持了下来，也在这一个月的时候开发了几个小应用，慢慢的发现在ExtJS还是比较好用的。功能也很强大。对于这种组件式的编程上手也没想象中的难。使用版本3.2，不过对于Tree这一块接触的不是很多，理解也不是很深刻。
不过有需要的朋友，可以留个邮箱，我可以把文档发过去！共同进步
一. GridPanel
var sm = new
Ext.grid.CheckboxSelectionModel();
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'
var expander = new Ext.ux.grid.RowExpander(
{
tpl : new Ext.Template(repairHtml)
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基本差不多，如果要设置可以编辑列可以如下设置：
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 : 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. 按数据库字段查询
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中传过来
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.submit( {
success : function(response, opts) {
self.editWindow.hide();
self.studentVacateGrid.getStore().load();
3. 将FormPanel值置空
formPanel.getForm().reset();
4. 将FormPanel放入window弹出窗口显示
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. 调用远程数据
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) {
七. 开始日期与结束日期
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;
});
