1.前言
ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进，ExtJS现在已经成功发布到了ExtJS
6版本,是一套目前最完整和最成熟的javascript基础库之一,利用ExtJS构建的WEB应用具有与桌面程序一样的标准用户界面和操作方式，并能够跨不同的浏览器平台使用。
就目前的市场趋势，现在用户对体验的要求越来越高。涌现出很多优秀的前台javascript框架，如Prototype、JQuery、ExtJS等等，ExtJS无疑是其中优秀的解决方案之一。它能够帮助开发者快速实现良好的用户界面开发，在加上ExtJS又是开源的，所以ExtJS的生命力极强，作为web开发人员来说，我们需要掌握这个优秀的技术帮助我们开发。
2.ExtJS的开发包
要开始Ext之旅的第一步就是要获得开发包，我们可以从官方网站里进行下载: http://www.sencha.com/products/extjs/download
包结构说明：
builds目录为ExtJS压缩后的代码
docs目录为ExtJS的文档
examples目录中是官方的演示示例
locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文
overview是ExtJS的功能概述
packages中是ExtJS各部分功能的打包文件
resource中书ExtJS要用到的图片文件与样式表文件
src目录是未压缩的源码
bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js
ext-all.js文件是ExtJS的核心库,是必须要引入的
ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用
spket-1.6.23插件下载
3.EXT框架基础
3.1 统一的组件模型
虽然Ext拥有几乎完美的对象继承模型,但是这毕竟属于底层架构的一部分,我们日常开发时接触最多的还是各种组件与布局,
3.1.1 Ext.Component
Ext中所有的可视化组件都继承自Ext.Component,这种单继承的模型保证所有组件都拥有相同的通用方法和生命周期,也保证了布局时的便利
组件常用的几项功能包含initComponent(),render(),show()与hide(),destroy()无论哪种组件,都是通过初始化,渲染,显示,隐藏来实现生命周期的
所有Ext组件的基类,组件下所有的子类都可能参与自动化Ext组件的生命周期执行创建, 渲染和销毁都是由Container容器类提供,组件可以通过容器配置items创建,
也可以通过动态方法 add创建
3.1.2 Ext.Container
Ext.Container继承Ext.Component,它提供了两个重要的参数,layout和items,layout参数指定当前组件使用何种布局,items参数(数据类型)中包含的是当前组件中的所有子组件.此处不得不提的一个重要概念是xtype,这个参数来简化配置和延迟布局中组件的初始化,我们在布局中添加几个组件,原始的方法是必须先把这些组件创建好,再加入布局容器中
采用xtype方式会更加的简单,我们只需要关注对应的配置就行,
案例:
new Ext.Viewport({
layout:’border’,
items:[
{xtype:’panel’ region:’north’},
{xtype:’panel’ region:’south’},
{xtype:’panel’ region:’west’},
{xtype:’panel’ region:’east’},
{xtype:’panel’ region:’center’},
]
})
对于没有设置xtype属性的,ext默认的使用ext.panel使用,
如果你想制作一个可以对自身包含的子组件进行布局的组件,那么就要继承ext.container,它是一切可布局组件的超类
这里是所有有效的xtypes列表
xtype Class------------- ------------------
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progressbar Ext.ProgressBar
slider Ext.slider.Single
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window
Toolbar components-------------------------------
pagingtoolbar Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
Menu components---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
Form components---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
Chart components---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie
3.2
完善的事件机制
在ext中,时间分为两种类型,自定义事件和浏览器事件,所有继承ext.util.observable类的控件都可以支持事件,然后为这些继承observable的对象定义一些事件,然后为这些事件配置监听器,当某个事件被触发时,ext会自动调用对应的监听器,这就是ext的事件模型,代码清单
3.2.1自定义事件
person=function(name){
this.name=name;
this.addEvents(“walk”,”eat”,”sleep”);
}
Ext.extend(person,Ext.util.Observable,{
info:function(event){
return this.name
}
})
以上代码实现了一个名称为person的类,也可以用(ext.define定义)他有一个name属性,初始化时调用addEvents()函数定义三个事件,walk,eat,sleep,然后使用extend()函数让person继承ext.util.Observable的所有属性,此外还加上了info()函数,让他返回person的信息,
var person =new person();
person.on(“walk”,function(){
Ext.Msg.alert(‘event’,person.name+”在走啊走啊”)
...
})
这里的On()是addlistener()的简写形式,为对象添加
事件监听器,第一个参数传递事件名称,第二个参数是 事件发生时的函数
3.2.2开发中经常使用的事件
itemclick:选项的单击事件 单击选项时触发。
beforeexpand:在Panel被展开之前触发.监听器可以返回false取消展开操作。
beforeload:在一个新数据对象请求发出前触发此事件
........
扩展:
handler与listener的区别
ExtJS里handler和listener都是用来对用户的某些输入进行处理的，有必要区分一下各自都是怎么用的。
1、handler是一个特殊的listener；一般用于按钮(button)的配置项.
2、handler是一个函数，而listener是<event , 函数>对；可以配置多个事件,可以对Event进行方便的管理；
3.3开发模式
MVC框架整体认识
1，每个应用都有一个实体，就是Application对象，而每个应用同样采用单一入口结构，有个快捷函数就是Ext.application({config})，创建一个Application对象实例，并且运行它。Application在创建之初，会去加载Controller类
2，Application在lunch的时候，会创建一个Viewport实例，这个东西就像一个骨架一样，上面可以拼装各种View，具体说，就是各种布局形式和窗体控件，可以说是view界面的载体，一个页面只能有一个Viewport实例。
3，View纯粹是一个界面组件，或者说窗体控件的集合（比如form,grid和window）。它其实就是利用窗体控件panel,grid或form等进行用户界面展示,表格可以通过Ext.grid.GridPanel的getView()函数获取当前表格使用的视图实例,当我们希望在创建Gridview初始化一些参数可以使用Ext.grid.GridPanel的viewConfig参数,具体属性可以查看api.
通过Store来加载数据并且展现到界面上，界面控件的响应都写在Controller里面，View对Controller的存在全无所知，也没有代码上的依赖。
4，Controller的角色完全是个粘合剂，它在加载之初，会帮忙加载跟其有关的Model，Store，View类，而其真正的作用，是通过一系列的事件处理函数(比如点击保存按钮)，确定了每个View上面界面组件对用户交互行为的响应方法，可以说是一堆事件处理器函数的集合；这里面主要通过一个control成员函数来进行事件绑定，通过另一个叫ComponentQuery的组件，使用类似css
selector的语法来定位界面上的组件，并为其绑定事件处理器。
5，Model是对抽象数据的具体化，简单理解就是数据库里面的一行记录。
6，Store是对通过网络加载数据的过程的一个抽象，Store通过data发送请求(一般为ajax请求)到后台获取数据(一般返回json格式)，Store依赖于Model，通过关联的Model对象才知道如何将取回的数据对象化。
不管是grid(表格),tree(树),form(表单)都可以通过model格式化字段,这样就可以把后台字段转化为Ext想要的字段,有时需要用到mapping属性
3.4 应用程序的初始化和页面布局
3.4.1 通过Ext.Loader开启动态加载功能
Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制！只要遵循路径规范，即可动态加载js文件，方便把自己扩展组件动态加载进来，并且减轻浏览器的压力
通过Loader对象我们可以开启动态加载的依赖加载功能，我们一般通过它的setConfig方法开启动态加载，通过setPath设置加载路径，然后通过Ext.require方法加载相关类库。代码如下。
/**
开启动态加载的依赖加载功能和设置插件的路径，并加载相关类库
**/
Ext.Loader.setConfig({ enabled: true });//开启动态加载的依赖加载功能，默认为false不开启
Ext.Loader.setPath('Ext.ux', '/Scripts/ux');//设置命名空间"Ext.ux"的路径
Ext.require(['Ext.ux.CheckColumn', //加载相关类库和它的直接依赖
'Ext.ux.grid.FiltersFeature',
'Ext.ux.RowExpander',
'Ext.ux.grid.SPrint']);
3.4.2类的创建与继承
定义类的方法：define
对于Ext4.X版本来说，采用了新定义类的define方法
Ext.define(classname,properties,callback);
classname:要定义的新类的类名
properties：新类的配置对象
callback：回调函数，当类创建完后执行该函数
Ext.Class类
configs:
extend：用于继承
3.4.3利用Viewport和view进行页面布局
一个页面只能有一个Viewport，它就像骨架一样承载着多个view（这里指的上，下，左，右的panel），它是应用程序界面的载体
3.4.4 view，store和model创建组件和数据交互
JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。XML也是一种数据交换格式，为什么没有选择XML呢？因为XML虽然可以作为跨平台的数据交换格式，但是在JS(JavaScript的简写)中处理XML非常不方便，同时XML标记比数据多，增加了交换产生的流量，而JSON没有附加的任何标记，在JS中可作为对象处理，所以我们更倾向于选择JSON来交换数据。
3.4.5 Json对象与Json字符串
json字符串：指的是符合json格式要求的js字符串。例如：var
jsonStr = "{StudentID:'100',Name:'tmac',Hometown:'usa'}";
json对象：指符合json格式要求的js对象。例如：var
jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };
4.常用的组件
4.1 Ext.Panel
Ext.Panel是Ext经常使用的一个组件,它直接继承自Ext.Container,Ext.Panel无须继承就可以直接使用,使用collapseFirst,collapsed,collapsedCls和collapsible设置与面板折叠相关的配置,除此之外,还可以使用floating和shadow设置浮动阴影效果,以及使用html直接设置面板内容.
4.2表格控件
Ext表格功能非常的强大,包括排序,缓存,拖动,隐藏某一列,自动显示行号,,单元格编辑等实用功能.
表格由Ext.grid.Gridpanel定义,继承于Ext.panel,其xtype为grid,在ext中,表格控件必须包含列定义信息,并指定表格的数据存储器,表格的列信息由数组columns定义,而表格的数据存储器由Ext.data.Store定义
表格包含的列由columns配置属性来描述,columns是一个数组,每一行数据元素描述表格的列信息,表格的列信息包含首部显示文本(header),列对应的记录集字段(dataIndex),列是否可排序(sortable),列的渲染函数(renderer),宽度(width),格式化信息(format)等,主要用的是显示文本和记录集字段
var columns=[
{hearder:’编号’,dataIndex:’id’},
{hearder:’名称’,dataIndex:’name’},
{hearder:’描述’,dataIndex:’descn’}
]
列的默认宽度是100px,可以使用width属性自定义宽度,表格的结构确定后我们就可以向里面添加数据了,
var data =[
[‘1’,’name1’,’descn1’],
[‘2’,’name2’,’descn2’],
[‘3’,’name3’,’descn3’],
[‘4’,’name4’,’descn4’]
]
var store =new Ext.data.arrayStore({
renderTo:’grid’,
data:data,
fields:[//与columns定义的地方相对应,利用属性mapping可以控制对应关系
{name:’id’,mapping:1},
{name:’name’,mapping:0},
{name:’descn’,mapping:2},
] })
store.load();//初始化数据
var data=...创建了一个数据存储对象,用来定义表格中要显示的数据,这也是表格必须配置的属性,数据存储对象store负责把各种各样的原始数据(如二维数组,json对象数组,xml文本等)转换成Ext.data.Record类型的对象,通过Ext.data.ArrayStore,我们可以把任何格式的数据转换成表格可以使用的形式,
store对应两个部分:proxy和reader,proxy是指获取数据的方式,reader是指如何解析这一对数据,这里我们使用Ext.data.ArrayStore,它的内部会默认通过内存加载json数据作为元数据
renderTo属性指定ext将表格渲染到什么地方,所以HTML里应该有一个<div
id=”grid”></div>与之对应
4.2.1自动显示行号
var columns=[
new Ext.grid.RowNumberer(),
{hearder:’编号’,dataIndex:’id’},
...
]
grid.view.refresh();//可以刷新表格,重新显示行号,
4.2.2复选框
var sm =new Ext.selection.CheckboxModel();
var grid =new Ext.grid.gridpanel({
autoHeight:true,
renderTo:grid,
store:store,
columns:columns,
selModel:sm
sm:new Ext.grid.RowModel({singleSelect:true})//(行选择模型),按ctrl可以多选
})
4.2.3表格分页
var grid =new Ext.grid.gridpanel({
renderTo:grid,
store:store,
columns:columns,
bbar:new Ext.PagingToolbar({
pageSize:10,
stroe:store,
displayInfo:teue,
displayMsg:’显示第{0}条到{1}条记录,一共{2}条’,
emptyMsg:”没有记录”
})
})
store.load();
后台翻页使用json获取数据格式一般是
{totalProperty:100,
root:[
{id:0,name:”name0”,descn:”dwscn0”}
{id:1,name:”name1”,descn:”dwscn1”}
]}
proxy也要改一下
proxy{
type:’ajax’,
url:’####.jsp’
}
reader:{
type:’json’,
totalProperty:’totalProperty’,
root:’root’,
idProperty:’id’
}
最后在初始化时通过传递对应的分页参数去获得希望得到额数据,具体代码
store.load({params:{start:0,limit:10}})
拓展:
1.利用pagingMemoryProxy.js可以实现前台分页,适用于数据量比较小的
2.Ext.grid.plugin.CellEditing与Ext.grid.propertyGrid可以提供表格编辑的功能,详情查看api
3.表格的features:[{htype:’grouping’}]可以实现表格分组
4.表格的resizable函数实现拖放改变表格大小
5.gridviewdragdrop实现单个表格或者表格之间的拖放
6.利用右键事件itemconextmenu可以实现表格的右键菜单
7.在表格的plugins属性添加一个Ext.ux.RowEditor就可以启用行编辑器,然后双击表格的某一行就会看到行编辑器,我们还要为columns添加一个editor属性,该属性定义输入控件的xtype和校验规则,
8.在分页工具pagingToolbar中添加Ext.ux.ProgressBarPager可以用进度条方式显示分页
4.2.4树形表格
树形表格同时具备树形的分级结构和表格的丰富内容,
Ext.ux.tree.TreeGrid详细使用查看api
4.2.5 root与record的用法
{
"total": 122,
"success": true,
"users": [
{
"id": "ed-spencer-1",
"value": 1,
"user": {
"id": 1,
"name": "Ed Spencer",
"email": "ed@sencha.com"
}
}
]
}
reader: {
type : 'json',
root : 'users',
record: 'user'
}
reader读取返回的json
reader : {
type : 'json',
root : 'users',//一般为数组的键名称
record:'user'
totalProperty : 'total',(默认值)如果不是total就用这个属性指定下
successProperty : "success" (默认值)
}
如果是data[list[{....},{....}]]如果root是list,则root:data.list
4.3表单与输入控件
4.3.1表单
Ext.form.FormPanel继承自Ext.Panel,可以对其执行各种panel的操作,实际上,表单的功能是Ext.form.BasicForm中实现的,在获取Ext.form.FormPanel之后,随时可以使用getForm()方法获得BasicForm对象,我们可以在得到的BasicForm上执行”提交表单数据”和”复位表单初始值”等操作,
Ext.form.FormPanel最大的好处就是利于布局,Ext.form.FormPanel继承了Ext.Panel,我们可以把Ext.form.FormPanel放在Ext.Viewport中作为整个页面布局的一部分,同时也可以利用items指定Ext.form.FormPanel内部的子组件,如果其他panel一样,可以通过xtype来指定每个子组件的类型,
Ext各种输入组件的继承图
4.3.2输入控件
Ext.form.Field是所有表单输入控件的基类,定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为3大类:页面显示样式,控件参数配置和数据有效性验证
页面显示样式:clearCls,cls,fieldClass,focusClass,itemCls,invalidClass,labelStyle等属性,它们用来定义不同状态下输入框采用的样式,
控件参数配置:
autoCreate,disabled,fieldLabel,hideLabel,inputType,labelSeparator,name,readOnly,tabIndex,value等属性,它们主要来设置输入控件生成的DOM内容和标签内容,以及是否禁用和是否可读等配置
数据有效性校验: invalidText,msgFx,msgTarget,validateOnBlur,validateDelay,validateEvent等属性,它们用来设置数据校验的方式以及如何显示错误信息
4.3.3控件类型
文本输入框控件:Ext.form.TextField
日期输入控件:Ext.form.DateField
时间输入控件:Ext.form.TimeField
下拉控件:Ext.form.ComboBox
在线编辑器:Ext.form.HtmlEditor
隐藏域:Ext.form.Hidden
复选框:Ext.form.Checkbox
单选框:Ext.form.Radio
4.3.4表单布局
默认布局
表单中的标签默认使用左对齐的方式,一共有left,top,right,通过配置lableAlign:’right’,我们可以使用右对齐标签,标签文字的宽度也可以使用labelWidth设置,formPanel的默认布局是layout:’form’(自上而下布局)
平行分列布局
我们使用layout=’column’来说明使用的是列布局,然后在items指定的每列中使用columnWidth指定每列所占总宽度的百分比,如果使用列布局,不能使用defaultType只能默认的xtype了,否则会影响布局,在每一列中,我们也手动指定layout:’form’这样才能在每列中正常显示输入框和对应的标签
4.3.5数据校验
1.输入不能为空:allowBlank:false
2.最大长度和最小长度:maxLength ,minLength
3.借助vtype,属性值alpha:只能输入英文
alphanum:只能输入字母和数字
email:电子邮箱
url:网址
4.自定义校验规则,这种规则其实就是应许自定义正则表达式,
regex:正则表达式,regexText:提示语
4.3.6表单提交
1.表单提交方式
buttons:[{
text:’按钮’,
handler : function() {
var form = this.up('form').getForm()
if (form.isValid()) {
form.submit({
url : url,
method : 'POST',
waitTitle : '请等待',
waitMsg : '正在提交中...',
success : function(form, action) {
//Ext.Msg.alert('提示', suessMes);
//center.getStore().reload();
},
failure : function(form, action) {
//Ext.Msg.alert('提示', failureMes);
}
});
}
}
}]
form参数是form对象,如果想实现表单功能,可以使用这个参数,比如提交后清空所有数据,第二个参数action是响应信息,action.result是一个简易通道,省去了现货的responseText在转换成json的麻烦,我们直接从它里面调用返回的json数据,比如action.result.msg
2.Ajax提交
Ext.Ajax.request()
表单自身的ｓｕｂｍｉｔ就使用了ａｊａｘ方式，这里用单独的ａｊａｘ，
既然使用外部的ajax,我们就只需知道如何从中把字段的数据取出来,具体有以下几种方式,
1.form.getValues()函数,它有一个参数,true代表返回json组装的字符串,把表单数据封装为json字符串返回,false则返回json对象,默认为false,
2.findField()函数,它可以获得表单里的空间,例如,我闷闷现在有一个TextField,名称是text,那么就可以通过下面的方式获得控件
var text =form.getForm().findField(“text”);
例子:
ar form = this.up('form').getForm();
var vals=form.getValues();
Ext.Ajax.request({
url: url,
method:"POST",
params: {
userid : vals['userid'],
},
success: function(response){
alert("请求成功");
//var text = response.responseText;
// process server response here
}
});
3.使用Html原始的提交方式
Ext默认提交方式是不会进行页面跳转的,主要考虑到’one page one application’的形式,ext的本质是javascript,javascript能做的事ext也可以做到,Ext.form.Form中包裹了HTML的form表单,我们可以使用form.getForm().getEl().dom得到ＤＯＭ模型，然后．ａｃｔｉｏｎ＝＃＃＃＃．ｊｓｐ就可以表单提交后的跳转了
4.3.7文件上传
使用文件上传控件只需要为Ext.form.field设置inputType:’file’即可
4.3.8数据自动填充至表单
这种适用于进入修改页面,我们可以利用var reder=new Ext.data.JsonReader({},[
{name:’text’,type:’String’}
{name:’number’,type:’float’}
{name:’date’,type:’date’,dateFormat:’Y-m-dTH:i:s’}
]);
然后在表单load()函数中添加向后台获取数据的url,并且设置表单属性reader:reader
4.4树形结构
在应用中,我们经常需要显示或者处理树形结构的对象信息,比如部门信息或者地区信息,这些信息可以用树来表示,树是典型的数据结构.
4.4.1创建树
树控件由Ext.tree.TreePanel类定义,继承自Ext.Panel类,
1.获得树面板
var tree =new Ext.tree.TreePanel();
tree.render(‘tree’)
这里的参数tree表示渲染的DOM的id.在html中,有<div
id=’tree’ ></div>与之相对应,最后这棵树就出现在div的位置上
现在我们获得了树形的面板,既然是树,就必须有一个根,有了根才能在上面生长树枝,最后成为一颗完整的树,
2.创建树根
strore:new Ext.data.TreeStore({
root:{
text:’我是根’,
leaf:true
}
})
上面定义了一颗树的根,通过store参数把根root放到树形里,然后对树形进行渲染,让它出现在id=’tree’的位置,
3.为树添加枝和叶
var tree =new Ext.tree.TreePanel({
strore:new Ext.data.TreeStore({
root:{
text:’我是根’,
children:[{
text:’我是根的第一个树枝’,
children:{
text:’我是根的第一个树枝上的第一个叶子’,
leaf:true
}
},{text:’我是根的第一个叶子’,leaf:true }]
}
}),
rendTo:’tree’//渲染到指定的id
});
我们创建了三个TreeNode,可以让树加载后直接展开tree.getRootNode().expand(true,true)
4.4.2使用TreeStore获得数据
像上面那样获得数据不仅麻烦,而且容易出错,Ext.data.TreeStore可以利用从后台获取的数据为我们组装出一颗树来,我们只需要提供数据,让TreeStore完成数据转换和装配节点的操作
var tree=new Ext.tree.TreePanel({
store:new Ext.data.TreeStore({
proxy{
type:’ajax’,
url:’###.text’
},
root{
id=”root”,
text:’我是根’
}
})
})
我们根据根节点的id返回对应JSON数据,返回的响应中必须包含每个节点的id和text,id是节点的唯一标识,如果是叶子(后面没有数据了)设置leaf:true
4.4.3树的事件
tree.on(“itemexpand”,function(node){});//展开
tree.on(“itemcollapse”,function(node){});//折叠
tree.on(“itemclick”,function(node){});//点击
4.4.4右键菜单
1.制作自定义菜单
var contextmenu=new Ext.menu.Menu({
id:’theContextMenu’,
items:[{
text:’有本事点我啊!’,
handler:function(){
alert(“我被击中了”);
}
}]
})
2.绑定contextmenu事件
tree.on(“itemcontextmenu”,function(view,record,item,index.e){
e.preventDefault();
contextmenu.showAt(e.getXY())
})
e为右键事件
4.4.5修改节点的默认图标
每个树形节点都有icon和iconCls属性,他们负责指定节点的图标
使用iconCls时,我们还需要在HTML中添加对应的ＣＳＳ定义，比如
iconCls：icon-male,
.x-tree-icon-leaf.icon-male｛
ｂａｃｋｇｒｏｕｄ－ｉｍａｇｅ：ｕｒｌ（ｕｓｅｒ－ｍａｌ．ｐｎｇ）
｝//css要使用层叠的写法,定义在x-tree-icon-leaf,否则css不起作用
4.4.6带有CheckBox的树形
只要我树形节点添加checked:true 就会显示对应的Checkbox,
children{
{text:’name1’,leaf:true,checked:true}
{text:’name1’,leaf:true,checked:}
}
拓展:
刷新树的所有节点
根节点有一个reload()函数,使用它会刷新其下的所有节点
4.5数据存储与传输
4.5.1 Store
Ext.data.Connection
Ext.data.Connection是对Ajax的封装,它提供了配置实用Ajax的通用方法,Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTag
proxy中执行与后台交互的任务,他会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理,Ext.Ajax继承此类
Ext.data.Record
Ext.data.Record就是一个设定了内部数据类型的对象,他是Ext.data.Store的最基本 组成部分,如果把Ext.data.Store看成一张二维表,那么它的每一行就对应一个Ext.data.Record实例
Ext.data.Record的主要功能是保存数据,使用Ext.data.Record时,通常都是由create()函数开始的
Ext.data.Store
Ext.data.Store是Ext中用来进行数据交换和数据交互的标准中间件,无论是表格还是combobox,都是通过它实现数据读取,类型转化,排序分页和搜索等功能,在Ext.data.Store中,有一个Ext.data.record
数组,所有数据都存放在这些Ext.data.record实例中,为后面的修改和读取操作做准备
每个store最少需要两个组件的支持,分别是proxy和reader,前者用于从某个途径读取原始数据,后者用于将原始数据转换成record实例
4.5.2常用的proxy
proxy的作用是通过内存,http等不同的媒介获取原始数据,然后将获取的数据交给对应的读取器进行处理
MemoryProxy
MemoryProxy只能从javascript对象获得数据,可以直接把数组或者JSON和ＸＭＬ格式的数据交给他处理
HttpProxy
HttpProxy使用http协议,通过Ajax去后台获取数据,构造它时需要设置url:’###.jsp’参数,这里的url可以更换成任何一个合法的网址,这样HttpProxy才知道去哪里获取数据,
ScriptTagProxy
ScriptTagProxy几乎和HttpProxy用法一样,但是它支持跨域
4.5.3常用的Reader
读取器作用是将数组,json等个数的原始数据转换成Ext所需要的通用数据类型
ArrayReader
从proxy中读取的数据需要进行解析,这些数据转换成record数组后才能提供给Ext.data.Store使用
arrayREder的作用是从而为数组里依次读取数据,然后生成对应的record,默认情况下按列顺序读取数组中的数据,不过也可以考虑用mapping指定record与原始数组对应的列号,arryReader不支持分页
JsonReader
处理json的读取器,支持分页,几个重要的参数root,totalProperty,record
xmlReader
处理Xml的读取器
ArrayStore=store+MemoryProxy+arrayReader
使用arrayStore只需要设置MemoryProxy的data和arrayReader的fields就可以了
JsonStore=store+HttpProxy+JsonReader
4.5.4 Store传参
数据格式:
[
{
id: 'children',
text: '系统管理',
children: [
{
text: '角色管理',
leaf: true
},
{
text: '部门管理',
leaf: true
},
{
text: '权限管理',
leaf: true
}
]
}
]
proxy : {
type : 'ajax',
url : content + "/statute/searchStatute.do",
reader : {
type : 'json',
root : 'children',
totalProperty : 'totalCount'//数据中所有记录数
}
},
listeners : {
beforeload : {
fn : function(s) {
Ext.apply(s.proxy.extraParams, {
userid: ""
});
}
}}
4.6.窗口
4.6.1确认框
Ext.MessageBox.confirm('提示', '确认要退出吗?', callBack);
function callBack(id) {
//alert('单击的按钮id是：'+id);
if(id=="yes"){
Ext.Msg.alert("提示","退出成功");
}
}
4.6.2提示框
Ext.Msg.alert()
5.布局
5.1 fit布局
它自动适应页面大小,适应页面大小变化,页面变大表格变大,页面变小表格也变小,缺点是每次只能使用一个子组件,
5.2 border布局
它将整个布局区域划分了东西南北中五个部分,
5.3 accordion布局
伸缩菜单,展开折叠分组
5.4 card布局
Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。比如上一步,下一步
5.5 anchor布局
anchor布局将使组件固定于父容器的某一个位置，既可以为items中的每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算本身的大小,即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小,是一个比较灵活的布局
5.6 absolute布局
Absolute布局继承Ext.layout.container.Anchor布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用
5.7 form布局
form布局也是anchor的一个子类,是表单专用布局,可以在它里面使用anchor设置宽和高的比例,但主要还是布局表单
5.8 column布局
它将整个容器进行竖直切分的布局方式,一般被称为列布局，这种布局的目的是为了创建一个多列的格式
5.9 table布局
一般被border布局和column布局代替
5.10 HBox布局
水平布局,它可以实现一行中排列多个组件的功能,实现组件的平行排列,column显得过于复杂.
5.11 VBox布局
竖直布局,用法和HBox用法类似
6.实用工具
6.1Ext提供的常用函数
6.1.1 onReady()函数
这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于window的onload方法，但是注意其执行时机是在页面的DOM对象加载完毕之后立即执行。
6.2.2 get()函数
用来获取一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是对Ext对DOM的封装,每个Element对象都对应着HTML中的一个DOM元素,我们可以为每一个DOM创建一个对应的Element对象,并通过Element对象中的函数实现Dom的指定操作,例如可以使用hide()函数隐藏元素get函数是Ext.Element.get的简写形式,参数可以是DOM节点的id,也可以是一个element,或者是一个DOM节点对象
6.3.3 getCmp()函数
该函数用来获得一个Ext组件,也就是已经在页面中被初始化的Component或者其子类的对象,getCmp()函数可以根据指定的id获得对应的Ext.Component,实际上Ext.getCmp()是对Ext.ComponentMgr.get()的简写形式,Ext每个组件都会注册到ComponentMgr中,只要得到他的id,就可以得到对应的组件
6.4.4 getDom()函数
该函数可以获得文档中的Dom节点,他只包含一个参数,该参数可以是Dom节点的id,Dom节点的对象,或者Dom节点对应的Ext元素,Ext.getDom()可以看做是Ext.get().dom的等同形式,
6.5.5 getBody()函数
该函数直接获取文档中与document.body这个Dom节点对应的Ext元素,实际上就是把document.body对象封装成Ext元素对象并作为结果返回,没有参数
6.6.6 getDoc()函数
getDoc可以将当前HTML文档对象(也就是document对象)封装成Ext的element对象并返回,没有参数,
6.7.7 encode()函数与decode()函数
encode()和decode()函数是专门用来对json数据进行编码和解码的函数,
encode()函数的作用是对对想,数组,或者其他值进行编码,将对象转换为json字符串的形式,目的是把javascript中的对象通过HTTP协议发送到后台服务器并进行相应的处理,因为Http协议只能发送字符串形式的参数,无法将javascript中的对象直接传递到后台,http只能发送iso-8859-1编码的字符,像中文这种无法使用iso-8859-1编码的字符,还需要先转换为iso8859-1编码格式才能通过http传输,
Ext.decode()函数的作用是将字符串解析为JSON对象,在ajax应用中,我们经常让服务器返回json数据,由于json数据是字符串,所以在程序中需要先把它解析成javascript对象,我们利用XmlHttpRequest对象responseText或者responseXML属性获得服务器返回的数据,利用decode进行json转换为javascript对象的操作.
6.8.8 apply()函数与applyIf()函数
Ext.apply()函数的作用是将一个对象中所有属性都复制到另一个对象中,applyIf()的作用与apply的作用类似,区别在于如果某个属性在目标对象中已经存在,则不会覆盖原属性
Ext.apply(属性接受者,属性提供者)
6.9.9 namespace()函数
该函数的作用是将能够传入的参数转换为对象,使用该方法的主要目的是区分名称相同的类,这与java中package的作用类似
6.10.Ext.each()函数
当需要对数组中每个元素进行同一种操作时,可以利用each()函数,它会迭代循环数组,将每个元素传入预先定义的回调函数中进行处理
6.11 Ext之DOM
6.11.1 Ext.Element（几乎对DOM的一切进行了彻底封装）可以查询Ext.dom.Element
6.11.2 EXt.DomHelper（操控UI界面的工具类）
Element这个类，无疑是非常强大的，里面提供了丰富的方法供我们使用，但是Ext为了更加的方便我们去操作DOM元素，特提供了DomHelper这个辅助的工具类。下面是DomHelper提供的几个常用的函数
DomHelper.append()函数会将生成的节点放到指定节点的最后边
DomHelper.insertBefore()函数会将新生成的节点插入指定节点的前面
DomHelper..insertAfter()函数会将新生成的节点插入指点节点的后边
DomHelper.overwrite()会替换指定节点的insertHTML内容
DomHelper.applyStyles()为指定的DOM元素设置指定的css样式
DomHelper.createTemplate()可以创建一个模板,具体参阅Api
6.11.3 Ext.DomQuery（用来进行DOM节点查询）参阅Ext.dom.Query
下面是此方法的详细使用规则：
基本元素选择器 id选择器css的类选择器 标签选择器（简单选择器）
属性选择器
伪类选择器（也可以说是相当于JQ过滤选择器）
Ext.query基本使用形式：
Ext.query('span') 返回整个文档的span标签
Ext.query('span' , 'root') 根据跟节点进行查询
Ext.query('#id') 根据id进行查询，但返回数组
Ext.query('.class') 根据样式进行查询，返回数组
Ext.query('div span') 根据标签进行包含选择器过滤
Ext.query('*') 匹配所有元素
Ext.query('input[value*=val]') 进行一个属性的选择匹配
Ext.query('E>F') 进行一个层次查找父节点为E的F节点
7.代码积累
7.1方式
1.树形菜单的几种切换方式
1.centerPanel.body.update('<iframe id="workspace" src=’’ scrolling="no" frameborder="0" width="100%" height="100%"></iframe>')
2.var mainPanel =Ext.getCmp('main');
mainPanel.removeAll();
mainPanel.add(Ext.create("Forestry.app.systemManage.UserManagement",""));
3.center.getStore().load({
url:content+"/statute/searchStatuteByTree.do",
params:{
scope:1,
statuteProperty:type,
}
});得到树的根节点
treePanel.getRootNode()或者treePanel.store.getRootNode()
2.表格的选择模式
var gsm = 表格名称.getSelectionModel(); //选择模式
var rows = gsm.getSelection();
if(rows.length ==1){
var id = rows[0].get('statuteId');
}else{
alert("请选择一条数据！");
}
}
7.2其他
define:定义一个类或覆盖。
create实例化一个类,创建类对象,
extend继承一个类
Ext系统基础架构我把他分为了6部分：
第一：类的创建define、类的实例化create，这其中根据你的配置经过了复杂的处理。
首先，所有的用define创建的类 都经过这个流程：用classname处理器解析你定义的类名，然后经过loader处理器实现动态加载功能，然后走extend处理器，默认继承自Ext.Base，这是一个根基类。如果你写了extend这个配置，那么就继承你配置的类。这三个处理器是必须走的！！
然后根据我们的配置去走其他的处理器：期间经过statics、inheritableStatics、config、mixins、xtyle、alias、singleton、alternateClassName、use这些处理器，最后调用Ext.ClassManger把当前定义的类交给Ext管理起来，方便我们使用。
initComponent
我们知道，Ext 的UI组件有一个initComponent()方法。这个方法定义在UI组件*类Component中，在Component的构造函数中会调用它进行组件初始化操作。
Component 的子类都覆盖了 initComponent方法，它的目的 是要实现Ext.Component提供任何所需的构造逻辑函数每个子类的。
在初始化组件模板被创建的类的方法，
dockedItems
一个或者一系列组件作为挂靠组件被添加到panel中。 这个挂靠组件可以被安置在panel的上，右，左或者底部。