`
zjx2388
  • 浏览: 1329060 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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; 

}); 

分享到:
评论

相关推荐

    Ext常用属性总结

    本文将深入探讨"Ext常用属性总结"这一主题,帮助开发者更好地理解和利用ExtJS的特性。 首先,让我们了解几个基本的ExtJS概念。`Ext.Component`是所有UI组件的基础类,它拥有众多属性来控制组件的行为、外观和交互。...

    Ext常用属性总结.doc

    ### Ext常用属性总结 在开发基于Ext JS框架的应用程序时,了解并熟练掌握其核心组件的属性是非常重要的。本文将详细介绍Ext JS中常用的属性及其应用场景,帮助开发者更好地编写高效、可维护的代码。 #### 一、Ext ...

    Ext2.02的一些总结

    标题 "Ext2.02的一些总结" 暗示了我们即将探讨的是关于Ext JS库的一个特定版本,即2.02,这是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。Ext JS提供了丰富的用户界面组件和强大的数据管理功能。在...

    Windows读取Ext4分区的工具 Ext2Read

    总结来说,Ext2Read是一个实用的工具,帮助Windows用户方便地访问和提取Linux EXT分区的数据,扩展了跨平台操作的可能性。不过,在使用过程中,用户应当遵循相应的安全规范,避免对数据造成不必要的损害。

    Ext性能优化总结

    ### Ext性能优化总结 在多年的Ext项目开发过程中,积累了丰富的经验与技巧,下面将这些关键的知识点进行详细的阐述,希望能为同行提供有价值的参考。 #### 一、架构优化:One Page One Application模式 在传统的...

    Ext 学习总结 pdf版

    ### Ext JS 学习总结与理解 #### 一、Ext JS 结构树 在文档的开始部分提到了“Ext JS 结构树”,这部分内容虽然没有给出具体的细节,但我们可以推测这是关于Ext JS框架的整体架构介绍。Ext JS是一个用于构建交互式...

    Ext常用功能开发总结

    `Ext.window.Dialog`或`Ext.MessageBox`提供弹出式对话框,用于信息提示、确认操作、输入等。 ### 弹出窗口的使用 `Ext.window.Window`创建自定义窗口,包含任意组件,可自由配置大小、位置和关闭按钮。 ### 可...

    Ext4.0学习总结及功能详解

    Ext4.0学习总结及功能详解。描述ext各种控件用法,布局等。

    ext4_utils

    总结,ext4_utils是Linux系统管理员和Android开发者的重要工具,它为处理ext4文件系统提供了强大的功能。在三星线刷ROM的制作过程中,ext4_utils确保了文件系统的创建、调整和维护,从而保证了系统的稳定性和高效性...

    ext学习总结.rar

    ext学习总结 这对初学者很有帮助

    Ext2IFS windows

    总结,Ext2IFS是一个实用的工具,帮助Windows用户无缝地与Linux的ext文件系统交互,无论是为了数据共享还是故障排查,都是一个值得拥有的工具。正确使用并注意数据安全,能极大地提高跨平台工作的效率。

    ext 技术总结

    ext 技术总结

    EXT2.0,EXT4.0,JS

    总结来说,EXT2.0和EXT4.0是Linux系统中的两种文件系统,JavaScript是一种关键的Web编程语言,EXT JS是一个基于JavaScript的前端开发框架。这些技术相互配合,共同构成了现代计算机系统和网络应用的基础。通过学习和...

    ext.net 1.x DEMO

    总结来说,EXT.NET 1.x 提供了一个强大的开发环境,使开发者能够快速构建功能丰富的Web应用。在给定的DEMO中,我们看到了如何利用EXT.NET实现基本的数据操作和拖放功能,这对于物流公司的管理应用是非常实用的。通过...

    Ext4.0学习总结及功能详解(特别详细)

    【Ext4.0学习总结及功能详解】 Ext4.0是Ext JS框架的一个重要版本,它带来了许多增强和新特性,使得开发复杂的Web应用程序变得更加高效和便捷。在本篇文章中,我们将深入探讨两种布局方式——accordion布局和border...

    不错的ext日志管理系统

    总结来说,EXT日志管理系统是IT运维中的重要工具,它能够有效地管理和分析日志数据,提高故障排查效率,保障系统的稳定运行,同时也为企业提供了一种有效监控和审计的方法。对于任何依赖日志数据进行决策或故障排除...

    Ext.Store的获取方法

    总结来说,在Ext.js中,获取`Ext.Store`应使用`Ext.getStore`方法,而不是`Ext.getCmp`,因为Store是通过`storeId`在内存中注册和管理的,而不是作为页面上的一个可视组件。同时,Store的设计方式有助于数据的安全性...

    基于EXT2.0.2表格间数据拖拽

    总结来说,EXT2.0.2的表格间数据拖拽涉及到EXT Grid、DataStore、DragDrop和DropTarget的使用,通过这些组件和接口的组合,开发者可以创建出高度交互、功能丰富的Web应用。实现这一功能需要对EXT的API有深入的理解,...

Global site tag (gtag.js) - Google Analytics