ExtJS培训进阶教程文档格式.docx
- 文档编号:3683708
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:29
- 大小:79.86KB
ExtJS培训进阶教程文档格式.docx
《ExtJS培训进阶教程文档格式.docx》由会员分享,可在线阅读,更多相关《ExtJS培训进阶教程文档格式.docx(29页珍藏版)》请在冰点文库上搜索。
要学习及应用好Ext框架,必须需要理解HtmlDOM、ExtElement及Component三者之间的区别。
每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。
(通常使用getElementById/Ext.getDOM获得DOM对象)仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句javascript才能完成。
因此,Ext在DOM的基础上,创建了ExtElement,可以使用Element来包装任何DOM,Element对象中添加了一系列快捷、简便的实用方法。
3.1getDom方法
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。
(与getElementById是一个效果);
Ext.onReady(function(){
vare=newExt.Element("
hello"
);
Ext.getDom("
Ext.getDom(e);
Ext.getDom(e.dom);
});
//Html页面中包含一个id为hello的div,代码如下:
<
divid="
>
aaa<
/div>
3.2get方法
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。
get方法其实是Ext.Element.get的简写形式。
Ext.get("
));
Ext.get(document.getElementById("
Ext.get(e);
});
//Html页面中包含一个id为hello的div
3.3getCmp方法
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法中只有一个参数,也就是组件的id。
getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。
Ext.onReady(function(){varmyPanel=newExt.Panel({id:
“myFirstPanel”,title:
“旧的标题"
renderTo:
"
width:
300,height:
200});
Ext.getCmp("
myFirstPanel"
).setTitle("
新的标题"
Ext.Element占ExtCore库的篇幅很大,其中方法就占据了大部份。
因此我们将这些方法可分为下面几类:
DOM查询或遍历(如query、select、findParent)
CSS(如setStyle、addClass)
DOM操控(如createChild、remove)
方位、尺寸(如getHeight、getWidth)
获取下一个侧边节点,跳过文本节点。
可选地可送入一个期待的选择符。
Ext.get('
elId'
).next();
类似的还有:
elId"
).prev();
//上一个侧边节点Ext.get(„elId‟).first();
//第一个节点Ext.get("
).last();
//最后一个节点Ext.get("
).parent();
//父节点,等等。
比如要获取页面上所有的p标签,则可以使用:
varps=Ext.select('
p'
这样你就可以对所要获取的元素进行操了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进行遍历:
ps.each(function(el){el.highlight();
//高亮});
当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如:
ps.highlight();
//select方法返回的结果可直接如同Element般地操作
Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。
区别在于返回类型上。
分别是:
query方法返回的是JavaScript标准的数组类型;
select方法返回的是CompositeElement类型。
CompositeElement类型属于Ext自定义的类型,简单地说是以一个Ext.Element实例代表集合中多个元素,可实现Element对象上所有的接口,也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素,均被视为一个单独元素处理。
它的用法和单个的Element对象一样。
select方法返回的结果可直接如同Element般地操作,一般比query方法常用。
DomQuery是ExtCore提供的HTML或XML文档选择器,它支持大部分的CSS3选择器规则,同时提供了一些自定义方式.DomQuery主要有4种选择方式:
元素标记、元素属性、伪对象、CSS值
1.通过元素标记选择,主要有以下6种方法:
(1)*:
选择任何元素。
其使用方法请看下面代码。
Ext.select('
*'
(2)E:
元素的标记为E。
div'
(3)EF:
选择包含在标记E中的标记F。
diva'
//将选择div下的a元素(4)E>
F:
选择包含在标记E中的直接子标记F。
div>
a'
//将选择div下的直接子元素a(5)E+F:
选择所有紧接在元素E后的元素F。
div+a'
//将选择紧接在div下的元素a
2.通过元素属性选择,主要有以下7种语法。
(1)E[foo]:
选择带有属性foo的元素。
其使用语法请看下面代码。
div[id]'
//选择有id属性的div元素
(2)E[foo=bar]:
选择foo的属性值为bar的元素。
input[checked=true]'
//选择checked属性值为true的元素(3)E[foo^=bar]:
选择foo的属性值以bar开头的元素。
其使用语法请看下面代码。
input[name^=form1]'
//选择name属性值以form1开头的元素(4)E[foo$=bar]:
选择foo的属性值以bar结尾的元素。
input[name$=form1]'
//选择name属性值以form1结尾的元素(5)E[foo*=bar]:
选择foo的属性值包含字符串bar的元素。
其使用语法请看下面代码。
input[name*=form1]'
//选择name属性值包含字符串form1的元素(6)E[foo%=2]:
选择foo的属性值能整除2的元素。
3.通过伪对象选择,主要有以下18种语法。
(1)Ext.select('
ulli:
first-child'
//选择所有ul下的第一个li子节点
(2)Ext.select('
last-child'
//选择所有ul下的最后一个li子节点(3)Ext.select('
nth-child
(2)'
//选择所有ul下的第2个li子节点(4)Ext.select('
nth-child(odd)'
//选择所有ul下的奇数行li子节点(5)Ext.select('
nth-child(evan)'
//选择所有ul下的偶数行li子节点(6)Ext.select('
only-child'
//选择所有ul下只有一个子节点的li节点(7)Ext.select('
input:
checked'
//选择所有checked属性值为true的元素(8)Ext.select('
first'
//选择第一个input元素(9)Ext.select('
last'
//选择最后一个input元素(10)E:
nth(n):
选择匹配的第n(n≥1)个元素E。
nth
(2)'
//选择第2个input元素(11)E:
odd:
是语法“:
nth-child(odd)”的简写。
(12)E:
evan:
nth-child(evan)”的简写。
(13)Ext.select('
div:
contains(list)'
//选择innerHTML属性包含“list”的div(14)Ext.select('
nodeValue(test)'
//选择包含文本节点且值为“test”的
4.通过CSS值进行选择。
主要有以下6种语法。
(1)E:
{display=none}:
选择display值为none的元素E。
其使用语法请看下面代码。
Ext.select('
{display=none}'
//选择display值为none的元素E
(2)Ext.select('
{display^=none}'
//选择display值以none开始的元素E
(3)Ext.select('
{display$=none}'
//选择display值以none结尾的元素E
(4)Ext.select('
{display*=none}'
//选择display值包含字符串none的元素E
(5)Ext.select('
{display%=none}'
//选择display值整除2的元素E
(6)Ext.select('
{display!
=none}'
//选择display值不等于none的元素EDomquery的语法可以单独使用,也可以组合在一起使用,例如以下代码:
div,span'
//选择所有div元素与span元素Ext.select('
div.red:
first-child[display=none]'
//选择class为red,且是第1个子节点,display属性为none的div
如果没有指定选择器开始搜索的根节点,默认是从body节点开始,这就等于每次都要做全文搜索,其性能可想而知,是相当低效的
4事件
HTML元素的标准事件是指mouseover、mousedown、click、blur、focus、change等能够直接对HTML元素发生的事件。
在ExtJS中,这些事件的处理可以用如下的代码:
注册一个事件处理函数使用:
Ext.get('
myElement'
).on('
click'
myHandler,myScope);
myElement是要注册的元素的ID,click是事件的名称(注意,和HTML元素中的声明onXXX不同,这里不需要on),myHandler是处理函数的函数名称,myScope是一个可选的参数,指定处理函数绑定的对象,也就是处理函数的作用域,如果不提供这个参数,则是默认的window。
撤销一个事件处理函数:
myElement"
).un("
click"
myHandler,myScope)参数的意义同上。
5ExtJs所包含组件
5.1ExtJS组件分类
EXTJS有近40种组件,而这些组件又可以大致分成三大类,即基本组件、工具栏组件、表单及元素组件。
EXIJS的基本组件:
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可编辑的表格
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
窗口
工具栏组件是为了构造工具栏而准备的,在Windows桌面软件中,工具栏随处可见,以其方便性与集成性为用户所称道。
EXTJS的工具栏组件能够在Web上构造其表现和功能与桌面软件完全一样的工具栏。
工具栏组件有:
---------------------------------------
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
工具栏文本项
在传统WebUI中,表单时重要的界面元素了。
ExtJS的表单组件对普通HTML的表单进行了封装,不仅提供了更靓丽的外观表现,同时也扩充了功能。
使用EXTJS时限Web应用,表单组件也是使用最为频繁的组件了。
表单及字段组件包含:
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 触发录入项
6ExtJs常用组件介绍
6.1Panel组件
面板本身是一个容器,应用程序界面一般由一个个面板,通过不同的方式组合而成,里面可以包含各种其他的组件;
面板一般由以下几个部分组成:
一个顶部工具栏、一个底部工具栏、面板头部(即title)、面板底部、面板主区域。
6.1.1panel示例
6.1.1.1简单的panel
6.1.1.2tabPanel
6.1.1.3panel的组成
6.1.2panel的布局
panel的布局主要有十种之多,主要包括ContainerLayout(容器布局)、FitLayout(自适应布局)、AccordionLayout(折叠布局)、CardLayoutLayout(卡片式布局)、AbsoluteLayout(绝对位置布局)、FormLayout(表单布局)、ColumnLayout(列布局)、BoderLayout(边框布局)、TableLayout(表格布局),下面介绍几个常用的布局方式:
6.1.2.1ContainerLayout(容器布局)
提供容器作为布局的基础逻辑,通常会被扩展而不通过new关键字直接创建,一般作为默认布局存在;
6.1.2.2ColumnLayout(列布局)
6.1.2.3TableLayout(表格布局)
6.1.2.4BoderLayout(边框布局)
BorderLayout边框布局将布局分为5部分:
east,south,west,north,center
6.1.3panel属性简介
1.autoLoad:
有效的url字符串,把那个url中的body中的数据自动加载显示
2.autoScroll:
设为true则内容溢出的时候产生滚动条,默认为false
3.bbar:
底部条,显示在主体内,//代码:
bbar:
[{text:
'
底部工具栏bottomToolbar'
}],工具条中也可以放置相应的按钮,以及其他的组件,分页条等等
4.tbar:
顶部条,显示在主体内,//代码:
tbar:
顶部工具栏topToolbar'
}],
5.buttons:
按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:
buttons:
按钮位于footer"
}];
[newExt.Button({text:
确定'
})]
6.buttonAlign:
footer中按钮的位置,枚举值为:
left"
"
right"
center"
默认为right面板中按钮的显示位置,不过按钮的显示并没有在panel的主体中,
而是显示在底部的工具条上
7.collapsible:
设为true,显示右
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 培训 进阶 教程
![提示](https://static.bingdoc.com/images/bang_tan.gif)