`
ootabc
  • 浏览: 110814 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

extjs 应用总结

阅读更多
从开始接触、运用ExtJS已经有一个月左右的时间了,开始接触时感觉很有难度,本身对javaScript就没多少兴趣。迫于工作的压力也坚持了下来,也在这一个月的时候开发了几个小应用,慢慢的发现在ExtJS还是比较好用的。功能也很强大。对于这种组件式的编程上手也没想象中的难。使用版本3.2,不过对于Tree这一块接触的不是很多,理解也不是很深刻。

不过有需要的朋友,可以留个邮箱,我可以把文档发过去!共同进步

一. GridPanel
/**
*给grid添加复选框
**/
var sm = new Ext.grid.CheckboxSelectionModel();
/**
*数据解析器,name与mapping相同时,可以省略mapping
**/
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'
}]);
/**
*扩展 grid  (repairHtml 可以定义扩展的样式)
*/
var expander = new Ext.ux.grid.RowExpander( {
tpl : new Ext.Template(repairHtml)
});
/**
*组合成grid
**/
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基本差不多,如果要设置可以编辑列可以如下设置:
/**
*设可编辑列,如红色标识处,加editor属性
**/
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函数
**/
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. 按数据库字段查询
/**
* 往GridPanel的store中监听发beforeload事件
* values是获得所有查询条件值
**/
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中传过来
 数据库中直接查找
/**
*同样也需要有数据解析器,在formpanel中添加剂   reader : formReader
**/

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中添加URL属性列。如url : '/vacate/editVacate.action'
**/
formPanel.submit( {
success : function(response, opts) {
self.editWindow.hide();
self.studentVacateGrid.getStore().load();
}
3. 将FormPanel值置空
formPanel.getForm().reset();
4. 将FormPanel放入window弹出窗口显示
/**
*将FormPanel放入Window的items属性中即可
**/
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. 调用远程数据
/**
*当调用远程数据时,如果有传入默认值,应该在默认值传入formPanel之前加载完数据源
**/
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) {
                 }
七. 开始日期与结束日期
/**
* 给所有FormPanel中含有VTYPE属性的组件添加如下事件。
* 必需给出name,如果只指定id则无效
**/
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;
}
});
分享到:
评论

相关推荐

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    EXTJS开发总结.pdf

    EXTJS注重客户端的复杂应用开发,提供了丰富的组件和功能,使得开发者能够构建出功能强大的Web应用程序,类似于Isomorphic SmartClient或Backbase Enterprise Ajax等更重量级的框架。 在EXTJS开发中,与服务器端的...

    extjs 总结

    EXTJS 是一种基于 JavaScript 的前端框架,主要用于构建富客户端应用程序。它提供了一套完整的组件库,包括用于创建各种用户界面元素的类,如表格、窗口、菜单、表单等。在EXTJS中,TreePanel是用于展示树形数据结构...

    ExtJS介绍及应用举例

    ExtJS是一种基于JavaScript的开源富客户端框架,专用于构建功能丰富的、交互式的Web应用程序。它提供了大量的组件和API,能够创建具有桌面应用级别的用户界面,包括数据网格、表格、图表、菜单、工具栏等。ExtJS的...

    ExtJS3总结内容

    ### ExtJS3总结内容:深入理解xtype与vtype #### 概述 在ExtJS3框架中,`xtype`与`vtype`是两个关键的概念,它们分别用于组件类型的标识和表单验证规则的定义。本文将详细介绍`xtype`的使用,以及其在ExtJS3组件...

    Extjs简明总结(教程)

    一旦这些文件加载完成,你可以通过`Ext.onReady`函数来启动你的应用程序,这是每个ExtJS应用的入口点。 ExtJS的类库主要由以下几部分组成: - **底层API (core)**:提供DOM操作、事件处理、查询器等基础功能。 - **...

    一个ExtJs4.1.1版本MVC应用框架

    4. app.js:这是应用程序的核心文件,定义了ExtJS应用的配置和初始化过程。在这里,开发者会定义应用程序的启动配置,包括命名空间、启动控制器、加载模型、存储和视图等。例如,可能包含以下代码片段: ```...

    extjs+servlet+json简单应用

    总结来说,"extjs+servlet+json简单应用"是利用ExtJS构建前端界面,通过Ajax与Servlet进行通信,Servlet处理业务逻辑并返回JSON数据,再由ExtJS解析并展示。这种方式让前后端职责明确,提高了代码的可维护性和扩展性...

    Extjs开发总结(转).pdf

    ExtJS是一种富互联网应用(RIA)开发框架,专注于构建客户端应用程序。与Prototype和jQuery等轻量级库不同,ExtJS提供了完整的组件模型和丰富的用户...在实际项目中,不断学习和总结经验,是提升ExtJS开发技能的关键。

    Extjs学习—总结的extjs的一些常用小知识点

    Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,总结一些对于初学者来说非常有用的小知识点。 #### 二、...

    EXTJS开发总结[参考].pdf

    EXTJS是一种专为构建富互联网应用(RIA)的前端JavaScript框架,它的主要定位与Prototype、jQuery等轻量级库截然不同。EXTJS强调客户端的复杂界面和用户体验,而Prototype和jQuery更倾向于辅助性的客户端功能增强。...

    ExtJs的图形化

    虽然ExtJS主要应用于Web应用,但通过Adobe AIR,开发者可以将ExtJS应用打包成桌面应用,这样用户无需浏览器即可使用,提供了一种更接近原生应用的体验。 总结一下,本压缩包提供的资源可能包括: 1. `xds_preview....

    Extjs portal 应用初探

    总结来说,"Extjs portal 应用初探"涉及到的主题包括:ExtJS Portlet的概念和使用,Portlet布局的创建,portlet的动态加载和异步更新,以及阅读和理解ExtJS源码的重要性。通过实际项目如"mms.html"的实践,开发者...

    ExtJS桌面化(desktop)插件Demo项目

    ExtJS是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。在本项目中,"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心...

    Extjs6示例中文版

    - **应用体系结构**:了解ExtJS应用的基本结构是非常重要的,这有助于开发者更有效地组织代码和管理项目资源。 #### 4. 使用Sencha Cmd - **创建新项目**:使用`sencha app create`命令可以快速创建一个全新的...

    extjs4.2 desktop 拓展

    总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...

    extjs6.6框架的web项目(登录+首页)

    2. **Sencha CMD**:Sencha CMD是EXTJS的命令行工具,用于自动化构建、打包和部署EXTJS应用。在这个项目中,使用Sencha CMD成功地发布了应用,这包括编译、压缩、合并和优化代码,确保了应用的性能和加载速度。 3. ...

    extjs中三个基础包

    总结起来,EXTJS 的这三个基础包是构建EXTJS 应用的基础,它们共同提供了EXTJS 所需的样式、脚本和环境支持。理解并合理使用这些文件,对于高效、高质量地开发EXTJS 应用至关重要。在深入学习EXTJS 的同时,还应关注...

Global site tag (gtag.js) - Google Analytics