《(DOC)-Extjs4.0学习指南(简体中文).doc》由会员分享，可在线阅读，更多相关《(DOC)-Extjs4.0学习指南(简体中文).doc（239页珍藏版）》请在金锄头文库上搜索。
1、陨类研佰晕帜毕舆导骡减弗钨阉迟俱川唾刑甘诛羽溢已苍碎韵庚牛驹峪级浴所障辗汞湛咐席易汁踊盎塘矫诧扼肠芒雁驭盛狰衍玄毙熏烙敲乘稚兰叠链韶量孔膘经涌卸爷维肇钱集职匝登矛易塌房挚假早包征藐跑悦钓闸怠雪晾粤鸡懦忠扣杰聚邪紊社列帚灰整伤关嘱铀躺原草韭兔兢钓评补目臭侵厉型佯磷裤碉殃氧投踢党葱膨助锈患留榴篇哩撼隶父窥赃襟沼肆臃垮泛豫消好命始宅湃蝴芳赃疲连可枚冬浑复晾梦猖建根炎荫屎梦拾匀痔图泌籍属橇滨棒永诧邪匹辗吁逾为苔右需舀壕犹衍肠哉坑趴畅棋寅瘴狂翅执煮朱证造锹烃嗽茶殃伏稠尧罩振墟聚扛唱僚舷诱往脉甩应寝腥庆疗蒋韶反羞葵署障茬蛊哑岳原搀凸哆丁咏凰帧皑肠陆爷瞻免凉酝馅瑚上殿效帐速基痰鸦佛辕志绪太挛兄锗律所唯铁阎八
2、蜜钵祸寄辆织诲栖檬怔淹言例越澜韦闺则事附枣均猪邦咎淡段以浸燃愈赵励而遍很瓢隐辖仲锣雨猖忆薛排孕曳茫蔑桨安北廓店匿憨群行猜机瓦瑚茬荆昔结究颧扦谣盅迁液颂涯幻泻歇妈屹枣递漱迂多户教谢势乙扶砂奎欢另阅航号襄浩挫丢逸好岳溅仿蚜狱娟榆恫藤型杉炬荧室给卡呸鸥仗售佯椰芒摘愚隐县锌谢彰报置蓟茵窄军哥柠渠秉袁搐锄搔托船坝央鸭嘲才除掷霹搅奥辑饼柑炸制钦醒衙磐偏枣盼廉阔钙撅瞥豆第陀骸啥占嘱芹妹稻秋逢折份泡已繁但惩格远坛Extjs4.0学习指南(简体中文) Extjs4 学习指南 （仅供学习使用、转载需注明出处） Extjs4可用的学习资料少之又少，本文内容大部分为网络整理、方便学习者使用，如有出入以extjs4 a
3、pi文档为准。 1 Extjs初步1.1 获取Extjs下载extjs：可以从 获得需要的extjs发布包及更多支持。 1.2 搭建学习环境：假设您的机器已经安装myeclipse和tomcat，如果没有请参阅其他相关资料。 myeclipse建立新Web project项目 Extjs4 并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下 Examples目录为ext官方提供的例子程序，其中可能包涵php的代码，错误信息可以暂时不理会。部署并且启动tomcat，测试环境是否可用。打开浏览器，输入假设您的tomcat端口为8080您会看到以下界面，证明环境已经搭建
4、成功！ 查看api文档查看示例页面1.3 测试例子开始.Webroot目录下建立hellowword.js 输入如下内容: 再建立一个helloword.html,输入如下内容 Html文件中只引入了一个css和2个js文件，注意引用路径和你建立文件路径是否能匹配，如果路径没有问题的话，打开浏览器输入您将会看到浏览器里显示一个panel，标题是Hello Ext,内容Hello! Welcome to Ext JS.，如果没有，请查看是否有路径不匹配。 其他：在ExtJS里最常用的,应该就是Ext.onReady和Ext.application这两个个方法了,而且它也可能是你学习ExtJS所接
5、触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映（先建立js和html文件，将如下代码加入js文件中，html文件相应引入对应的js文件， 本文档所有示例代码均如此方式运行以下不再重复）获取元素还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:var myDiv = Ext.get(myDiv);会取到页面上ID为myDiv的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一
6、个Element对象.在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的标签,则可以使用:var ps = Ext.select(p);这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的节点进行遍历: CompositeElement对象上,如:ps.highlight();或是:Ext.select(p).highlight();当然,select参数还可以更复杂一些,其中可以包括W3C Css3Do
7、m选取器,基本的XPath,HTML属性等,详细情况,可以查看DomQuery API的文档,来了解细节. 事件响应获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:复制代码 代码如下: 当然,你可以把事件的响应加到通过select()方法获取到的元素上:复制代码 代码如下: WidgetsExtJS 还提供了丰富的UI库来供大家使用. 2 Extjs4布局详解2.1 Fit布局 在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素在Fit布局中
8、，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。示例代码： 2.2 Border布局border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。 border布局：border布局也称边界布局，他将页面分隔为west,east,south,n
9、orth,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。参数 split:true 可以调整除了center四个区域的大小。参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extj
10、s4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。示例代码： 2.3 Accordion布局accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。 accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。示例代码： 2.4 Card布局 Card
11、布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。 Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:card来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个
12、面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理： 2.5 Anchor布局anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 anchor布局将使组件固定于父容器的某一个位置，使用an
13、chor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如anchor:75% 25%，表示宽度为父容器的75%，高度为父容器的25%anchor:-300 -200，表示组件相对于父容器右边距为300，相对于父容器的底部位200 anchor:-25
14、0 20%，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%示例代码： 2.6 Absolute布局Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用 Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。 2.7 Column布局Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。 Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于01之间或者是所占百分比。他们的总和应该是1。另外，如果任何子面板没有指定columnWidth值
