`
hanjiangit
  • 浏览: 179475 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ExtJs2.0学习系列(3)--Ext.Window

阅读更多
前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站***视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同,但原理和使用方法是一样的,绝对值得一看(如果你想入门的话),希望没有广告的意思。
主站:***视频在线
extjs介绍及应用举例:ExtJS视频教程 第1讲 ExtJS介绍及应用举例
我不知道是不是要注册,觉的好的话,就值!

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window组件,它继承自panel。
先介绍个最简单例子

//html代码
<div id="win" class="x-hidden">
        </div>
//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:"标题"
        });
        w.show();
我们通过items把TabPanel组件嵌套在window的主体中去了。
我们在添加工具栏看看
// bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部
   buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
   buttonAlign:"center",//footer部按钮排列位置,这里是中间
// collapsible:true,//右上角的收缩按钮
其他工具栏方法一样。
关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明。
今天的内容比较少,请高手pp,让我们期待下篇文章!
分享到:
评论

相关推荐

    ExtJs入门实例

    3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习...

    EXT2.0中文教程

    D.3. 感谢[游戏人生395181055]的大力支持 D.4. 感谢[綄帥77793603]的大力支持 D.5. 感谢[葡萄5793699]的大力支持 D.6. 感谢[天外小人442540141]的大力支持 D.7. 感谢[我想我是海39893874]的大力支持 D.8. 还要感谢:...

    ExtJs2.0简明教程

    我这是根据别人写的做成PDF文档 第一章 开始ExtJS………………………………………………………………………………………………………4 1.1 获得ExtJS……………………………………………………………………...

    eclipse-ExtJs插件

    先到http://www.easyjf.com/上下载ExtJS2.0。 说明: 1,将下载的压缩包解压到eclipse的安装目录,完成后重启(自动会加载插件,也可CMD ECLIPSE目录 使用命令 eclipse -clean 重新编译) 2,Window → Preferences...

    EXT教程EXT用大量的实例演示Ext实例

    D.3. 感谢[游戏人生395181055]的大力支持 D.4. 感谢[綄帥77793603]的大力支持 D.5. 感谢[葡萄5793699]的大力支持 D.6. 感谢[天外小人442540141]的大力支持 D.7. 感谢[我想我是海39893874]的大力支持 D.8. 还要...

    Ext 开发指南 学习资料

    A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    基于EXTJS插件制作的弹出提示窗口.rar

     v1.0(20090424) 偷窃ext window素材以及利用ext core,DD,Resizable 简化重新实现Window  v1.1(20090424) 修正ie显示问题  v1.5 抄袭extjs window 拖放ghost实现  v1.6(20090426) 增加底部按钮设置(静态,动态...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...

    log4Net详解(共2讲)

    Extjs在经过两年的发展,Ext JS从2.0版开始,越来越受用户欢迎,今年,Extjs不但推出3.0版本,而且还推出了Ext Core,准备在Web2.0网站开发中占一席之地,如在 Extjs2.x版本中为人所诟病的速度问题在ExtJs3.0中有所...

    ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件。Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的...

    ExtAspNet控件 v3.1.9源码2012825

    基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有原生的 AJAX 支持和华丽的UI效果。 ExtAspNet的使命 创建没有 JavaScript,没有 CSS,没有 UpdatePanel,没有 ViewState,没有 WebServices 的网站应用程序。 支持的...

    北风网的源码和课件

    这是北风网的EXT2.0的视频源码和课件,对于新手入门很有用,特别是在panel,window等组件上的学习很有帮助,希望笑纳!

Global site tag (gtag.js) - Google Analytics