书签 分享 收藏 举报 版权申诉 / 78
立即下载 加入VIP,免费下载
当前位置： 首页 > 初中教育 > 语文 > ExtJs20入门文档.docx

类型ExtJs20入门文档.docx

  • 文档编号：2250313
  • 上传时间：2023-05-03
  • 格式：DOCX
  • 页数：78
  • 大小：437.33KB

//js代码

var p = new Ext.Panel（{

        title:

 'My Panel',//标题

        collapsible:

true,//右上角上的那个收缩按钮，设为false则不显示

        renderTo:

 'container',//这个panel显示在html中id为container的层中

        width:

400,

        height:

200,

        html:

 "

我是内容，我包含的html可以被执行！

"//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:

[{text:

'顶部工具栏topToolbar'}],

6.buttons:

按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：

buttons:

[{text:

"按钮位于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：

（id）呈现在哪个html元素里面

//关于这三个参数的区别（个人认为：

applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去）：

1.可拖动的panel实例

下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.

//html代码

..无..

//下面创建一个允许拖动的panel，但是拖动的结果不能保存

var p=new Ext.Panel（{

    title:

 'Drag me',

    x:

 100,

    y:

 100,

    renderTo:

 Ext.getBody（）,//x,y,renderTo:

Ext.getBody（）初始化panel的位置

    floating:

 true,//true

    frame:

 true,//圆角边框

    width:

 400,

    height:

 200,

    draggable:

true

}）.show（）;//在这里也可以不show（）

但是还不能拖到其他的地方，我们需要改写draggable：

draggable:

 {

        insertProxy:

 false,//拖动时不虚线显示原始位置

        onDrag :

 function（e）{

            var pel = this.proxy.getEl（）;

            this.x = pel.getLeft（true）;

            this.y = pel.getTop（true）;//获取拖动时panel的坐标

        },

        endDrag :

 function（e）{

            this.panel.setPosition（this.x, this.y）;//移动到最终位置

        }

    }

实现了可保存的拖动，如图：

拖动的时候阴影还在原位置，我们再在draggable中的onDrag事件中添加代码：

var s = this.panel.getEl（）.shadow;

            if （s） {

                s.realign（this.x, this.y, pel.getWidth（）, pel.getHeight（））;

            }

//shadow的realign方法的四个参数，改变shadow的位置大小属性

最后这个可拖动的panel的代码为：

var p=new Ext.Panel（{

    title:

 'Drag me',

    x:

 100,

    y:

 100,

    renderTo:

 Ext.getBody（）,

    floating:

 true,

    frame:

 true,

    width:

 400,

    height:

 200,

    draggable:

 {

        insertProxy:

 false,

        onDrag :

 function（e）{

            var pel = this.proxy.getEl（）;

            this.x = pel.getLeft（true）;

            this.y = pel.getTop（true）;

            var s = this.panel.getEl（）.shadow;

            if （s） {

                s.realign（this.x, this.y, pel.getWidth（）, pel.getHeight（））;

            }

        },

        endDrag :

 function（e）{

            this.panel.setPosition（this.x, this.y）;

        }

    }

}）

//效果图片我就不贴出来了

2.带顶部，底部，脚部工具栏的panel

var p=new Ext.Panel（{

   id:

"panel1",

        title:

"标题",

        collapsible:

true,

        renderTo:

"container",

        closable:

true,

        width:

400,

        height:

300,

        tbar:

[{text:

"按钮1"},{text:

"按钮2"}], //顶部工具栏

        bbar:

[{text:

"按钮1"},{text:

"按钮2"}],  //底部工具栏

        html:

"内容",

        buttons:

[{text:

"按钮1"},{text:

"按钮2"}] //footer部工具栏

   }）;

我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按钮事件代码：

tbar:

[{text:

"按钮1",handler:

function（）{Ext.MessageBox.alert（"我是按钮1","我是通过按钮1激发出来的弹出框！

"）}},{text:

"按钮2"}],

//改写tbar，添加handler句柄，点击顶部工具栏上按钮1，弹出提示框，效果图大家想象下，就不贴出来了

当然，一般情况下，我们只要一个工具栏，这里只是为了演示！

3.panel工具栏

//添加下面的代码到panel配置参数中

tools:

[{id:

"save"},{id:

"help"},{id:

"up"},{id:

"close",handler:

function（）{Ext.MessageBox.alert（"工具栏按钮","工具栏上的关闭按钮时间被激发了"）}}],

//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

前面介绍了panel组件--ExtJs2.0学习系列

（2）--Ext.Panel，今天将介绍window组件，它继承自panel。

先介绍个最简单例子

//html代码

        

//js代码

var w=new Ext.Window（{

           contentEl:

"win",//主体显示的html元素，也可以写为el:

"win"

           width:

300,

           height:

200,

           title:

"标题" 

        }）;

        w.show（）;

参数介绍：

因为前面已经介绍了panel组件，下面只介绍window组件的几个其他特别的配置参数

//几个前面没有介绍的window自己的配置参数

1.closeAction:

枚举值为：

close（默认值），当点击关闭后，关闭window窗口

                       hide,关闭后，只是hidden窗口

2.closable:

true在右上角显示小叉叉的关闭按钮，默认为true

3.constrain：

true则强制此window控制在viewport，默认为false

4.modal:

true为模式窗口，后面的内容都不能操作，默认为false

5.plain：

//true则主体背景透明，false则主体有小差别的背景色，默认为false

//需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖动大小的

w.show（）

实例介绍：

1.嵌套了tabpanel的window

var w=new Ext.Window（{

           contentEl:

"win",

           width:

300,

           height:

200,

           items:

new Ext.TabPanel（{

                      activeTab:

0,//当前标签为第1个tab（从0开始索引）

                      border:

false,

                      items:

[{title:

"tab1",html:

"tab1在windows窗口中"},{title:

"tab2",html:

"tab2在windows窗口中"}]//TabPanel中的标签页，以后再深入讨论

                 }）,

           plain:

true,//true则主体背景透明，false则主体有小差别的背景色，默认为false

           title:

"标题"

    

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
ExtJs20 入门 文档
提示  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：ExtJs20入门文档.docx
链接地址：https://www.bingdoc.com/p-2250313.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部