Ext 总结
一. 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;?
}?
});?