Ext 小结

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;?

}?

});?