ExtJs基本教程Word文件下载.docx
《ExtJs基本教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《ExtJs基本教程Word文件下载.docx（80页珍藏版）》请在冰豆网上搜索。
对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反
2.buttons:
弹出框按钮的设置，主要有以下几种：
Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CAMCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字：
{"
ok"
我本来是ok的"
}。
若设为false，则不显示任何按钮.
3.closable:
如果为false，则不显示右上角的小叉叉，默认为true。
4.msg:
消息的内容"
5.title:
标题"
6.fn:
关闭弹出框后执行的函数
7.icon：
弹出框内容前面的图标，取值为Ext.MessageBox.INFO，
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:
弹出框的宽度，不带单位
9.prompt：
设为true，则弹出框带有输入框
10.multiline：
设为true，则弹出框带有多行输入框
11.progress:
设为true，显示进度条，（但是是死的）
12.progressText:
显示在进度条上的字
13.wait：
设为true，动态显示progress
14.waitConfig:
配置参数，以控制显示progress
example:
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:
4.Ext.MessageBox.show（）中的进度条的使用
首先必须知道例外两个方法
Ext.MessageBox.hide（）和Ext.MessageBox.updateProgress（value,"
ProgressText"
）（三个参数，看名字就知道意思），
注意value为0-1之间的数，表示进度条的进度.
第一种：
（通过进度的大小控制进度，满进度为1）
Ext.get（"
btn1"
）.on（
click"
function（）{
df"
dfd"
300,
var
f=function（v）{
return
if（v==12）
{
Ext.MessageBox.hide（）;
//alert（"
加载完成！
}
else
i=v/11;
Ext.MessageBox.updateProgress（i,Math.round（100*i）+"
%
completed"
i）;
for（var
i=1;
i<
13;
i++）
setTimeout（f（i）,i*500）;
//从点击时就开始计时，所以500*i表示每500ms就执行一次
第二种：
（通过固定时间控制进度加载）
时间进度条"
5s后关闭进度框"
waitConfig:
{interval:
600},//0.6s进度条自动加载一定长度
setTimeout（function（）{Ext.MessageBox.hide（）},5000）;
//5后执行关闭窗口函数
最后关于那个waitConfig的参数，在此说明下：
1.interval:
进度的频率
2.duration：
执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度狂也不会消失。
3.fn:
duration的时间到后执行的函数
所以，上面的通过时间控制进度另外一种写法为:
interval:
600,
duration:
5000,
//让进度条消失
}},
//setTimeout（function（）{Ext.MessageBox.hide（）},5000）;
效果一样。
MessageBox类暂且就说这么多！
一起期待下一章...
ExtJs2.0学习系列
（2）--Ext.Panel
2008-8-7
上一篇文章ExtJs2.0学习系列
（1）--Ext.MessageBox，受到了大家的褒贬不一，还是有的朋友提出好的建议，在此表示感谢！
今天介绍extjs中的Panel组件。
//html代码
<
div
id="
container"
>
/div>
//js代码
p
=
new
Ext.Panel（{
'
My
Panel'
//标题
collapsible:
true,//右上角上的那个收缩按钮，设为false则不显示
renderTo:
container'
//这个panel显示在html中id为container的层中
400,
height:
200,
html:
p>
我是内容，我包含的html可以被执行！
/p>
//panel主体中的内容，可以执行html代码
因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。
//配置参数（只列举部分常用参数）
1.autoLoad：
有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:
设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:
设为true显示设为"
x-hidden"
的元素，很有必要，默认为false
4.bbar:
底部条，显示在主体内，//代码：
bbar:
[{text:
底部工具栏bottomToolbar'
}],
5.tbar:
顶部条，显示在主体内，//代码:
tbar:
顶部工具栏topToolbar'
6.buttons:
按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：
按钮位于footer"
}]
7.buttonAlign:
footer中按钮的位置，枚举值为：
left"
right"
center"
默认为right
8.collapsible：
设为true，显示右上角的收缩按钮，默认为false
9.draggable:
true则可拖动，但需要你提供操作过程，默认为false
10.html:
主体的内容
11.id：
id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：
宽度
13.height：
高度
13.title:
标题
14.titleCollapse：
设为true，则点击标题栏的任何地方都能收缩，默认为false.
15.applyTo：
（id）呈现在哪个html元素里面
16.contentEl：
（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：
//关于这三个参数的区别（个人认为：
applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去）：
英文如下（本人英语poor，不敢乱翻译）：
contentEl
-
This
config
option
is
used
to
take
existing
content
and
place
it
in
the
body
of
a
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，但是拖动的结果不能保存
p=new
Drag
me'
x:
100,
y:
Ext.getBody（）,//x,y,renderTo:
Ext.getBody（）初始化panel的位置
floating:
true,//true
frame:
true,//圆角边框
draggable:
}）.show（）;
//在这里也可以不show（）
但是还不能拖到其他的地方，我们需要改写draggable：
insertProxy:
false,//拖动时不虚线显示原始位置
onDrag
function（e）{
pel
this.proxy.getEl（）;
this.x
pel.getLeft（true）;
this.y
pel.getTop（true）;
//获取拖动时panel的坐标
endDrag
this.panel.setPosition（this.x,
this.y）;
//移动到最终位置
实现了可保存的拖动，如图：
拖动的时候阴影还在原位置，我们再在draggable中的onDrag事件中添加代码：
s
this.panel.getEl（）.shadow;
if
（s）
s.realign（this.x,
this.y,
pel.getWidth（）,
pel.getHeight（））;
//shadow的realign方法的四个参数，改变shadow的位置大小属性
最后这个可拖动的panel的代码为：
Ext.getBody（）,
}）
//效果图片我就不贴出来了
2.带顶部，底部，脚部工具栏的panel
id:
panel1"
按钮1"
},{text:
按钮2"
}],
//顶部工具栏
//底部工具栏
内容"
}]
//footer部工具栏
我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按钮事件代码：
handler:
function（）{Ext.MessageBox.alert（"
我是按钮1"
我是通过按钮1激发出来的弹出框！
）}},{text:
//改写tbar，添加handler句柄，点击顶部工具栏上按钮1，弹出提示框，效果图大家想象下，就不贴出来了
当然，一般情况下，我们只要一个工具栏，这里只是为了演示！
3.panel工具栏
//添加下面的代码到panel配置参数中
tools:
[{id:
save"
},{id:
help"
up"
close"
工具栏按钮"
工具栏上的关闭按钮时间被激发了"
）}}],
//id控制按钮，handler控制相应的事件
//id的枚举值为：
toggle
（collapsable为true时的默认值）
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
关于panel今天就讨论到这里，欢迎批评！
一起期待下一片文章.
ExtJs2.0学习系列（3）--Ext.Window
上一篇文章：
ExtJs2.0学习系列
（2）--Ext.Panel
下一篇文章：
ExtJs2.0学习系列（4）--Ext.FormPanel之第一式
前面介绍了panel组件--ExtJs2.0学习系列
（2）--Ext.Panel，今天将介绍window组件，它继承自panel。
先介绍个最简单例子
win"
class="
x-hi
升级会员 