ExtJs入门文档格式.docx
《ExtJs入门文档格式.docx》由会员分享，可在线阅读，更多相关《ExtJs入门文档格式.docx（99页珍藏版）》请在冰豆网上搜索。
e）title:
标题;
f）fn:
关闭弹出框后执行的函数;
g）icon:
弹出框内容前面的图标,
【Ext.MessageBox.INFO】【Ext.MessageBox.ERROR】【Ext.MessageBox.WARNING】【Ext.MessageBox.QUESTION】
h）width:
弹出框的宽度,不带单位;
i）prompt:
设为true,则弹出框带有输入框,默认为false;
j）multiline:
设为true,则弹出框带有多行输入框
k）progress:
设为true,显示进度条,（但是是死的）
l）progressText:
显示在进度条上的字
m）wait:
设为true,动态显示progress
n）waitConfig:
配置参数,以控制显示progress
Ext.MessageBox.show（{
title:
标题"
msg:
内容的消息"
buttons:
:
我不再显示OK了"
},
fn:
function（e）{alert（e）;
animEl:
test1"
width:
500,
icon:
Ext.MessageBox.INFO,
closable:
false,
progress:
true,
wait:
progressText:
进度条"
//prompt:
true
//multiline:
5.Ext.MessageBox.show（）中的进度条的使用
首先必须知道另外两个方法
Ext.MessageBox.hide（）和Ext.MessageBox.updateProgress（value,"
ProgressText"
）（三个参数,看名字就知道意思）,
【注意】value为0-1之间的数,表示进度条的进度.
第一种:
（通过进度的大小控制进度,满进度为1）
Ext.get（"
btn1"
）.on（"
click"
function（）{
Ext.MessageBox.show（{
title:
df"
msg:
dfd"
progress:
width:
300,
closable:
}）;
varf=function（v）{
returnfunction（）{
if（v==12）{
Ext.MessageBox.hide（）;
}Else{
vari=v/11;
Ext.MessageBox.updateProgress（i,Math.round（100*i）+"
%completed"
i）;
}
}
}
for（vari=1;
i<
13;
i++）{
setTimeout（f（i）,i*500）;
//从点击时就开始计时,所以500*i表示每500ms就执行一次
第二种:
（通过固定时间控制进度加载）
时间进度条"
5s后关闭进度框"
wait:
waitConfig:
{interval:
600},//0.6s进度条自动加载一定长度
setTimeout（function（）{Ext.MessageBox.hide（）},5000）;
//5后执行关闭窗口函数
}
最后关于那个waitConfig的参数,在此说明下:
a）interval:
进度的频率
b）duration:
执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失.
c）fn:
duration的时间到后执行的函数
所以,上面的通过时间控制进度另外一种写法为:
{
interval:
600,
duration:
5000,
fn:
//让进度条消失
}},
//setTimeout（function（）{Ext.MessageBox.hide（）},5000）;
ExtJs2.0学习系列
（2）--Ext.Panel
今天介绍extjs中的Panel组件.
<
!
--html代码-->
divid="
container"
>
/div>
--js代码-->
varp=newExt.Panel（{
'
MyPanel'
//标题
collapsible:
true,//右上角上的那个收缩按钮,设为false则不显示
renderTo:
container'
//这个panel显示在html中id为container的层中
400,
height:
200,
html:
"
p>
我是内容,我包含的html可以被执行!
/p>
//panel主体中的内容,可以执行html代码
因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法.
//配置参数（只列举部分常用参数）
a）autoLoad:
有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
b）autoScroll:
设为true则内容溢出的时候产生滚动条,默认为false
c）autoShow:
设为true显示设为"
x-hidden"
的元素,很有必要,默认为false
d）bbar:
底部条,显示在主体内,//代码:
bbar:
[{text:
'
底部工具栏bottomToolbar'
}]
e）tbar:
顶部条,显示在主体内,//代码:
tbar:
顶部工具栏topToolbar'
f）buttons:
按钮集合,自动添加到footer中（footer参数,显示在主体外）
//代码:
buttons:
按钮位于footer"
g）buttonAlign:
footer中按钮的位置,枚举值为:
left"
right"
center"
默认为right
h）collapsible:
设为true,显示右上角的收缩按钮,默认为false
i）draggable:
true则可拖动,但需要你提供操作过程,默认为false
j）html:
主体的内容
k）id:
id值,通过id可以找到这个组件,建议一般加上这个id值
l）width:
宽度
m）height:
高度
n）title:
标题
o）titleCollapse:
设为true,则点击标题栏的任何地方都能收缩,默认为false.
p）applyTo:
（id）呈现在哪个html元素里面
q）contentEl:
（id）呈现哪个html元素里面,把el内的内容呈现
r）renderTo:
//关于这三个参数的区别（个人认为:
applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去）;
关于contentEl有资料如下:
ContentEl
-
This
config
option
is
used
to
take
existing
content
and
place
it
in
the
body
of
a
new
panel.
It
not
going
be
actual
panel
itself.
（It
will
actually
copy
innerHTML
el
use
for
body）.
You
should
add
either
x-hidden
or
x-hide-display
CSS
class
prevent
brief
flicker
before
rendered
ApplyTo
allows
you
pre-defined
markup
create
an
entire
Panel.
By
entire,
I
mean
can
include
header,
tbar,
body,
footer,
etc.
These
elements
must
correct
order/hierarchy.
Any
components
which
are
found
need
created
autogenerated.
RenderTo
render
Panel
as
its
created.
would
same
saying
myPanel.render（ELEMENT_TO_RENDER_TO）;
考虑到入门,方法事件会在以后的文章中以实例穿插.
1.可拖动的panel实例
下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.
//下面创建一个允许拖动的panel,但是拖动的结果不能保存
varp=newExt.Panel（{
Dragme'
x:
100,
y:
Ext.getBody（）,//x,y,renderTo:
Ext.getBody（）初始化panel的位置
floating:
true,//true
frame:
true,//圆角边框
400,
200,
draggable:
}）.show（）;
//在这里也可以不show（）
但是还不能拖到其他的地方,我们需要改写draggable:
draggable:
insertProxy:
false,//拖动时不虚线显示原始位置
onDrag:
function（e）{
varpel=this.proxy.getEl（）;
this.x=pel.getLeft（true）;
this.y=pel.getTop（true）;
//获取拖动时panel的坐标
},
endDrag:
this.panel.setPosition（this.x,this.y）;
//移动到最终位置
实现了可保存的拖动,如图:
拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:
//shadow的realign方法的四个参数,改变shadow的位置大小属性
vars=this.panel.getEl（）.shadow;
if（s）{
s.realign（this.x,this.y,pel.getWidth（）,pel.getHeight（））;
最后这个可拖动的panel的代码为:
Ext.getBody（）,
true,
{
insertProxy:
false,
onDrag:
varpel=this.proxy.getEl（）;
this.x=pel.getLeft（true）;
this.y=pel.getTop（true）;
vars=this.panel.getEl（）.shadow;
if（s）{
s.realign（this.x,this.y,pel.getWidth（）,pel.getHeight（））;
},
endDrag:
this.panel.setPosition（this.x,this.y）;
}）
2.带顶部,底部,脚部工具栏的panel
id:
panel1"
tbar:
按钮1"
},{text:
按钮2"
}],//顶部工具栏
bbar:
}],//底部工具栏
内容"
}]//footer部工具栏
我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码:
handler:
Ext.MessageBox.alert（"
我是按钮1"
我是通过按钮1激发出来的弹出框!
）}},
{text:
}],
改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了
当然,一般情况下,我们只要一个工具栏,这里只是为了演示!
3.panel工具栏
添加下面的代码到panel配置参数中:
tools:
[{id:
save"
},{id:
help"
up"
{id:
close"
handler:
Ext.MessageBox.alert（"
工具栏按钮"
工具栏上的关闭按钮时间被激发了"
）}
}],
//id控制按钮,handler控制相应的事件
id的枚举值为:
toggle
（collapsable为true时的默认值）
closeminimizemaximizerestoregearpin
unpinrightleftupdownrefresh
minusplushelpsearchsaveprint
ExtJs2.0学习系列（3）--Ext.Window
介绍window组件,它继承自panel.
先介绍个最简单例子
win"
class="
//js代码
varw=newExt.Window（{
contentEl:
//主体显示的html元素,也可以写为el:
w.show（）;
参数介绍:
因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数
//几个前面没有介绍的window自己的配置参数
a）closeAction:
枚举值为:
close（默认值）,当点击关闭后,关闭window窗口,关闭后,只是hidden窗口
b）closable:
true在右上角显示小叉叉的关闭按钮,默认为true
c）constrain:
true则强制此window控制在viewport,默认为false
d）modal:
true为模式窗口,后面的内容都不能操作,默认为false
e）plain:
//true则主体背景透明,false则主体有小差别的背景色,默认为false
w.show（）//需要显示下show（）方法,默认的窗口是可拖动的,可关闭的,可拖动大小的
实例介绍:
1.嵌套了tabpanel的window
items:
newExt.TabPanel（{
activeTab:
0,//当前标签为第1个tab（从0开始索引）
border:
items:
[{title:
tab1"
html:
tab1在windows窗口中"
{title:
tab2"
tab2在windows窗口中"
}]}）,
plain:
true,//true则主体背景透明,false则主体有小差别的背景色,默认为false
我们通过items把TabPanel组件嵌套在window的主体中去了.
我们再添加工具栏看看
确定"
取消"
function（）{w.close（）;
}}],//bottom部
}}],//footer部
buttonAlign:
//footer部按钮排列位置,这里是中间
其他工具栏方法一样.关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明.
ExtJs2.0学习系列（4）--Ext.FormPanel之第一式
上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用.
首先弄清楚这个问题,创建的时候:
Ext.form.FormPanel
=
Ext.FormPanel;
//查看源代码便知,两种方法是一样的
我们还是从最简单的代码实例开始吧:
--html代码-->
form1"
varform1=newExt.form.FormPanel（{
350,
true,//圆角和浅蓝色背景
//呈现在哪个控件里
FormPanel"
bodyStyle:
padding:
5px5px0"
[{
fieldLabel:
UserName"
//文本框标题
xtype:
textfield"
//表单文本框
name:
user"
id:
200
},{
PassWord"
pass"
function（）{alert（"
事件!
}}]
都是通过items属性参数把表单元素添加到这个表单中.
我们发现两个文本框的类型和宽度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:
//简化代码,和上面的代码效果一样
f
升级会员 