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; 

} 

});