黄石振华化工有限公司:EXT_JS入门详解
来源:百度文库 编辑:九乡新闻网 时间:2024/10/06 01:04:36
第二章、开始ExtJS
2.1
获得ExtJS
adapter:负责将里面提供第三方底层库(包括Ext 自带的底层库)映射为Ext 所支持
的底层库。
build: 压缩后的ext 全部源码(里面分类存放)。
docs: API 帮助文档。
exmaples:提供使用ExtJs 技术做出的小实例。
resources:Ext UI 资源文件目录,如CSS、图片文件都存放在这里面。
source: 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的
协议。
Ext-all.js:压缩后的Ext 全部源码。
ext-all-debug.js:无压缩的Ext 全部的源码(用于调试)。
ext-core.js:压缩后的Ext 的核心组件,包括sources/core 下的所有类。
ext-core-debug.js:无压缩Ext 的核心组件,包括sources/core 下的所有类。
2.2
应用ExtJS
应用extjs 需要在页面中引入extjs 的样式及extjs 库文件,样式文件为resources/css/extall.css,extjs 的js 库文件主要包含两个,adapter/ext/ext-base.js 及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js 是extjs 的核心库。adapter 表示适配器,也就是说可以有多种适配器,因此, 可以把adapter/ext/ext-base.js 换成adapter/jquery/ext-jquery-adapter.js , 或
adapter/prototype/ext-prototype-adapter.js 等。因此,要使用ExtJS 框架的页面中一般包括下面几句:
在ExtJS 库文件及页面内容加载完后,ExtJS 会执行Ext.onReady 中指定的函数,因此
可以用,一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的,
第三章Ext
框架基础及核心简介
3.1
Ext
类库简介
ExtJS 由一系列的类库组成,一旦页面成功加载了ExtJS 库后,我们就可以在页面中通
过javascript 调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成:
底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上,底层api 位于源代码目录的
core 子目录中,包括DomHelper.js、Element.js 等文件,如图xx 所示。
控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中,包含
3.2
Ext的组件
Ext2.0 对框架进行了非常大的重构,其中最重要的就是形成了一个结构及层次分明的组
件体系,由这些组件形成了Ext 的控件,Ext 组件是由Component 类定义,每一种组件都有
一个指定的xtype 属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。
基本组件有:
xtype Class
box Ext.BoxComponent 具有边框属性的组件
Button Ext.Button 按钮
colorpalette Ext.ColorPalette 调色板
component Ext.Component 组件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 数据显示视图
datepicker Ext.DatePicker 日期选择面板
editor Ext.Editor 编辑器
editorgrid Ext.grid.EditorGridPanel 可编辑的表格
3.3
组件的使用
组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window(),
创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性
及值,组件根据构造函数中的参数属性值来初始化组件。比如下面的例子:
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具栏中的间隔
panel Ext.Panel 面板
progress Ext.ProgressBar 进度条
splitbutton Ext.SplitButton 可分裂的按钮
tabpanel Ext.TabPanel 选项面板
treepanel Ext.tree.TreePanel 树
viewport Ext.ViewPort 视图
window Ext.Window 窗口
工具栏组件有
toolbar Ext.Toolbar 工具栏
tbbutton Ext.Toolbar.Button 按钮
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacer Ext.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem 工具栏文本项
表单及字段组件包含
form Ext.FormPanel Form 面板
checkbox Ext.form.Checkbox checkbox 录入框
combo Ext.form.ComboBox combo 选择项
datefield Ext.form.DateField 日期选择项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor html 编辑器
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 区域文本框
textfield Ext.form.TextField 表单文本框
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项
运行上面的代码可以实现如下图所示的结果:
可以省掉变量obj,直接写成如下的形式:
render 方法后面的参数表示页面上的div 元素id,也可以直接在参数中通过renderTo 参
数来省略手动谳用render 方法,只需要在构造函数的参数中添加一个renderTo 属性即可,
如下:
对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要
父组件的构造函数中,通过给属性items 传递数组方式实现构造。如下面的代码:
注意中括号中加粗部份的代码,这些代码定义了TabPanel 这个容器控件中的子元素,
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'
Hello,easyjf open source
'});panel.render("hello");
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'
Hello,easyjf open source
'});
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");
这里包括三个面板。上面的代码与下面的代码等价:
前者不但省略掉了new Ext.Panel 这个构造函数,最重要前者只有在初始化TabPanel 的
时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。也就是说,前者实
现的延迟加载。
3.4
组件的配置属性
在ExtJS 中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象,该对象中的信息也就是指组件的配置属性。
比如配置一个面板:
再比如创建一个按钮:
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");
new Ext.Panel({
title:"面板",
html"面板内容",
height:100}
);
再比如创建一个Viewport 及其中的内容:
每一个组件除了继承基类中的配置属性以外,还会根据需要增加自己的配置属性,另外
子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS,
其中最关键的是掌握ExtJS 中的各个组件的配置属性及具体的含义,这些配置属性在下载下
来的ExtJS 源码文档中都有详细的说明,可以通过这个文档详细了解每一个组件的特性,
如下图所示:
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
new Ext.Viewport({
layout:"border",
items:[{region:"north",
title:"面板",
html:"面板内容",
height:100},
{region:"center",
xtype:"grid",
title:"学生信息管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});
由于所有的组件都继承自Ext.Component,因此在这里我们列出组件基类Component 中
的配置属性简单介绍。
配置属
性名称
类型简介
allowDomMove
Boolean
当渲染这个组件时是否允许移动Dom节点(默认值为true)。
applyTo
Mixed 混合参数,表示把该组件应用指定的对象。参数可以是—节点的id,
一个DOM节点或一个存在的元素或与之相对应的在document中已出现
的id。当使用applyTo,也可以提供一个id或CSS的class名称,如果子组
件允许它将尝试创建一个。如果指写applyTo选项,所有传递到renderTo
方法的值将被忽略,并且目标元素的父节点将自动指定为这个组件的容
器。使用applyTo选项后,则不需要再调用render()方法来渲染组件。
autoShow
Boolean
自动显示,如为true,则组件将检查所有隐藏类型的class(如:’x-hidden’
或’x-hide-display’并在渲染时移除(默认为false)。
Cls
String 给组件添加额外的样式信息,(默认值为''),如果想自定义组件或它的
子组件的样式,这个选项是非常有用的。
ctCls
String 给组件的容器添加额外的样式信息,默认值为'')。
disabled
Class
String 给被禁用的组件添加额外的CSS样式信息,(默认为"x-item-disabled")。
hideMo
de
String 组件的隐藏方式, 支持的值有’visibility’ , 也就是css 里的
visibility,’offsets’负数偏移位置的值和’display’也就是css里的display,
默认值为’display’。
hideParent
Boolean
是否隐藏父容器,该值为true时将会显示或隐藏组件的容器,false时则
只隐藏和显示组件本身(默认值为false)。
id
String 组件的id,默认为一个自动分配置的id。
listeners
Object 给对象配置多个事件监听器,在对象初始化会初始化这些监听器。
plugins
Object/ 一个对象或数组,将用于增加组件的自定义功能。一个有效的组件插
3.5
Extjs
组件的事件处理
ExtJS 提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监
控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由
Ext.EventManager 对象管理,与浏览器W
Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准html 中的事件处理,看下面的html 代码:
Array 件必须包含一个init方法,该方法可以带一个Ext.Component类型参数。
当组件建立后,如果该组件包含有效的插件,将调用每一个插件的init
方法,把组件传递给插件,插件就能够实现对组件的方法调用及事件应
用等,从而实现对组件功能的扩充。
renderTo
Mixed 混合数据参数,指定要渲染到节点的id,一个DOM的节点或一个已存
在的容器。如果使用了这个配置选项,则组件的render()就不是必需的了。
stateEvents
Array 定义需要保存组件状态信息的事件。当指定的事件发生时,组件会保存
它的状态(默认为none),其值为这个组件支持的任意event类型,包含
组件自身的或自定义事件。(例如:[‘click’,’customerchange’])。
stateId
String 组件的状态ID,状态管理器使用该id来管理组件的状态信息,默认值为
组件的id。
style
String 给该组件的元素指定特定的样式信息,有效的参数为
Ext.Element.applyStyles中的值。
xtype
String 指定所要创建组件的xtype,用于构造函数中没有意义。该参数用于在
容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义
的组件,则需要用Ext.ComponentMgr.registerType来进行注册,才会支
持延迟实例化和渲染。
el
Mixed 相当于applyTo
点击这个按钮则会触发onclick 事件,并执行onclick 事件处理函数中指定的代码,这里
直接执行函数a 中的代码,也即弹出一个简单的信息提示框。再简单修改一下上面的代码,
内容如下:
上面的代码在文档加载的时候,就直接对btnAlert 的onclick 赋值,非常清晰的指明了
按钮btnAlert 的onclick 事件响应函数为a,注意这里a 后面不能使用括号“()”。
ExtJS 中组件的事件处理跟上面相似,看下面的代码:
Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象,可以直接调
用该对象上的addListener 方法来给对象添加事件,同样实现前面的效果。在调用addListener
方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。
ExtJS 支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:
addLinster 方法的另外一个简写形式是on,由于调用了两次addListener 方法,因此当点
击按钮的时候会弹出两次信息。
当然,ExtJS 还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
由于在调用addListener 的时候传递指定的delay 为2000,因此当用户点击按钮的时候,
不会马上执行事件响应函数,而是在2000 毫秒,也就是两秒后才会弹出提示信息框。
当然,在使用Ext 的事件时,我们一般是直接在控件上事件,每一个控件包含哪些事件,
在什么时候触发,触发时传递的参数等,在ExtJS 项目的文档中都有较为详细的说明。比
如对于所有的组件Component,都包含一个beforedestroy 事件,该事件会在Ext 销毁这一个组件时触发,如果事件响应函数返回false,则会取消组件的销毁操作。
由于在窗口对象的beforedestroy 事件响应函数返回值为false,因此执行这段程序,你
会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明,如
下面的代码与前面实现的功能一样:
了解了ExtJS 中的基本事件处理及使用方法,就可以在你的应用中随心所欲的进行事件
相关处理操作了。
关于ExtJS 中事件处理中作用域、事件处理原理、给自定义的组件添加事件、处理相关的Ext.util.Observable
及Ext.EventManager 类详细介绍,请参考wlr.easyjf.com 中的VIP 文档《ExtJS 中的事件处理详解》。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口", height:200, width:300
});
win.on("beforedestroy",function(obj){
alert("想关闭我,这是不可能的!");
obj.show();
return false;
});
win.show();});
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我,这是不可能的!");
obj.show(); return false;
}}
});
win.show();});
第四章、使用面板
4.1
Panel
面板Panel 是ExtJS 控件的基础,很高级控件都是在面板的基础上扩展的,还有其它大
多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同
组织方式形成。
面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、
面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能,并提供一系列可重
用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本
身是一个容器,他里面又可以包含各种其它组件。
面板的类名为Ext.Panel,其xtype 为panel,下面的代码可以显示出面板的各个组成部
分:
运行该代码,可以得到如图xx 所示的输出结果,清楚的表示出了面板的各个组成部分。
一般情况下,顶部工具栏或底部工具栏只需要一个,而面板中一般也很少直接包含按钮,
一般会把面板上的按钮直接放到工具栏上面。比如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'
面板主区域
',tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
Ext.onReady(function(){
new Ext.Panel({
可以得到如图xx所示的效果,该面板包含面板Header,一个顶部工具栏及面板区域三
个部分。
4.2
工具栏
面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext 中工具栏是由Ext.Toolbar
类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具
栏,可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的
代码:
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'
Hello,easyjf open source!
',tbar:[{pressed:true,text:'刷新'}]
});
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'
Hello,easyjf open source!
',tools:[{
id:"save"},
{id:"help",
注意我们在Panel的构造函数中设置了tools属性的值,表示在面板头部显示三个工具栏
选项按钮,分别是保存"save"、"help"、"close"三种。代码运行的效果图如下:
点击help按钮会执行handler中的函数,显示一个弹出对话框,而点击其它的按钮不
会有任何行为产生,因为没有定义他们的heanlder。
除了在面板头部加入这些已经定义好的工具栏选择按钮以外,还可以在顶部或底工具栏
中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。
代码:
handler:function(){Ext.Msg.alert('help','please help me!');}
},
{id:"close"}],
tbar:[{pressed:true,text:'刷新'}]
});
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'
Hello,easyjf open source!
',tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
]
});
});
将会得到如图xx所示的结果:
Ext中的工具栏项目主要包含下面的类:
Ext.Toolbar.Button-按钮,xtype为tbbutton
TextItem-
Ext.Toolbar.Fill-
Separator-
Spacer-
SplitButton-
4.3
选项面板的TabPanel
在前面的示例中,为了显示一个面板,我们需要在页面上添加一个,然后把Ext 控件
渲染到这个div 上。VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,
并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例。看下面
的代码:
运行上面的代码会得到如图xxx 所示的输出结果。
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});
Viewport 不需要再指定renderTo,而我们也看到Viewport 确实填充了整个浏览器显示区
域,并会随着浏览器显示区域大小的改变而改改。
Viewport 主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应
用程序主界面。在Viewport 上常用的布局有fit、border 等,当然在需要的时候其它布局也
会常用。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north",
height:50,
html:"
网站后台管理系统!
"},
{title:"菜单",
region:"west",
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel",
region:"center",
运行上面的程序会得如图xx 所示的效果。
第五章、窗口及对话框
5.1
窗口基本应用
ExtJS 中窗口是由Ext.Window 类定义,该类继承自Panel,因此窗口其实是一种特殊的
面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码:
items:[{title:"面板1"},
{title:"面板2"}]
}
]
});
});
页面中的html 内容:
执行上面的代码,当点击按钮“新窗口”的时候,会在页面中显示一个窗口,窗口标题为
“窗口x”,窗口可以关闭,可以最大化,点击最大化按钮会最大化窗口,最大化的窗口可以
还原,如图xxx 所示。
5.2
窗口分组
窗口是分组进行管理的,可以对一组窗口进行操作,默认情况下的窗口都在默认的组
Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义,该类包括bringToFront、getActive、
hideAll、sendToBack 等方法用来对分组中的窗口进行操作。
var i=0;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get("btn").on("click",newWin);
});
看下面的代码:
页面中的html 代码
执行上面的代码,先点击几次“新窗口”按钮,可以在页面中显示几个容器,然后拖动这
些窗口,让他们在屏幕中不同的位置。然后点“放到后台”按钮,可以实现把最前面的窗口移
动该组窗口的最后面去,点击“隐藏所有”按钮,可以隐藏当前打开的所有窗口。如下图所示:
var i=0,mygroup;
function newWin()
{
var win=new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}f
unction hideAll()
{
mygroup.hideAll();
}
Ext.oReay(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
5.3
对话框
由于传统使用alert、confirm 等方法产生的对话框非常古板,不好看。因此,ExtJS 提供
了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm 等,实现华丽的
应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类,该类还有一个简写形式即Ext.Msg,可以直
接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下
面的代码:
Html 页面中的内容:
执行程序,点击上面的“alert 框”按钮,将会在页面上显示如下图所示的对话框。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});
除了alert 以外,Ext 还包含confirm、prompt、progress、wait 等对话框,另外我们可以
根据需要显示自下定义的对话框。普通对话框一般包括四个参数,比如confirm 的方法签
名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title 表示对话框的
标题,参数msg 表示对话框中的提示信息,这两个参数是必须的;可选的参数fn 表示当关
闭对话框后执行的回调函数,参数scope 表示回调函数的执行作用域。回调函数可以包含两
个参数,即button 与text,button 表示点击的按钮,text 表示对话框中有活动输入选项时输
入的文本内容。我们可以在回调函数中通过button 参数来判断用户作了什么什么选择,可
以通过text 来读取在对话框中输入的内容。看下面的例子:]
Html 内容:
点击对话框按钮将会出现下面的对话框,然后选择yes 或no 则会用传统的提示框输出
回调函数中button 及text 参数的内容。
因此,在实际的应用中,上面的代码可以改成如下的内容:
这样当用户点击对话框中的yes 按钮时,就会执行相应的操作,而选择no 则忽略操作。
下面再看看prompt 框,我们看下面的代码:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
alert(button);
alert(text);
});
});
});
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
});
});
});
Ext.onReady(function(){
Html 页面:
点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK 按钮则会输入你输
入的文本内容,选择cancel 按钮则会提示放弃了录入,如下图所示:
在实际应用中,可以直接使用MessageBox 的show 方法来显示自定义的对话框,如下
面的代码:
点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel
三个按钮,可以在回调函数save 中根据点击的按钮执行相应的操作,如图xx 所示。
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放弃了录入!");
});
});
});
function save(button)
{
if(button=="yes")
{
//执行数据保存操作
} else if(button=="no")
{
//不保存数据
} else
{
//取消当前操作
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作,是否要保存当前内容的修改?',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
第六章、布局Layout
6.1
布局概述
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext 的所有容器组件都支持而局
操作,每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列、组合及
渲染方式等。
ExtJS 的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS 的
容器组件包含一个layout 及layoutConfig 配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig 配置,有的则不需要layoutConfig 配置。看代码:
上面的代码我们创建了一个面板Panel,Panle 是一个容器组件,我们使用layout 指定该
面板使用Column 布局。该面板的子元素是两个面板,这两个面板都包含了一个与列布局相
关的配置参数属性columnWidth,他们的值都是0.5,也就是每一个面板占一半的宽度。执
行上面的程序生成如下图所示的结果:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、
FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的
时候,不能给这些容器组件再指定另外的布局。
ExtJS2.0 一共包含十种布局,常用的布局有border、column、fit、form、card、tabel
等布局,下面我们分别对这几种布局作简单的介绍。
6.2
Border
区域布局
Border 布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,
分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素
所在的位置,Border布局会自动把子元素放到布局指定的位置。看下面的代码:
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"}
]
});
});
执行上面的代码将会在页面中输出包含上下左右中五个区域的面板,如下图所示:
6.2
Column
列布局
Column 列布局由Ext.layout.ColumnLayout 类定义,名称为column。列布局把整个容器
组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度,而
width 则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面
的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
});
上面的代码在容器组件中放入了四个元素,在容器组件中形成4 列,列的宽度分别为
100,200,100 及剩余宽度,执行结果如下图所示。
也可使用columnWidth 来定义子元素所占的列宽度,看下面的代码:
注意columnWidth 的总和应该为1,执行代码将生成如下图所示的内容:
在实际应用中还可以混合使用,看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",columnWidth:.2},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.2}
]
}
);
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:200},
执行上面的代码将会生成如下图所示的结果:
6.3
Fit
布局
Column 列布局由Ext.layout.ColumnLayout 类定义,名称为column。列布局把整个容器
组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度,而
width 则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面
的代码:
上面的代码在容器组件中放入了四个元素,在容器组件中形成4 列,列的宽度分别为
100,200,100 及剩余宽度,执行结果如下图所示。
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
title:"列4",columnWidth:.4}
] }
);
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
});
再看使用Fit 布局后的代码,如下:
上面的代码指定父容器使用Fit 布局,因此子将自动填满整个父容器。输出的图形如下:
如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:
输出的结果如下:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素",html:"这是子元素中的内容"}
] }
);
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"fit",
width:500,
height:100,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
] }
);
});
如果不使用布局Fit,代码如下:
输出的结果如下图所示:
6.4
Form
布局
Form 布局由类Ext.layout.FormLayout 定义,名称为form,是一种专门用于管理表单中
输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。看下面的代
码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:500,
height:120,
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"}
] }
);
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
上面的代码创建了一个面板,面板使用Form 布局,面板中包含三个子元素,这些子元
素都是文本框字段,在父容器中还通过hideLabels、labelAlign 等配置属性来定义了是否隐
藏标签、标签对齐方式等。上面代码的输出结果如下图所示:
可以在容器组件中把hideLabels 设置为true,这样将不会显示容器中字段的标签了,如
下图所示:
在实际应用中,Ext.form.FormPanel 这个类默认布局使用的是Form 布局,而且FormPanel
还会创建与