【Ext.Window】
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 358
今天给大家分享Window组件,由于前几天公司在做项目,时间有点紧!所以一直到现在才分享!好的!还是直接进入正题!还是老样子先举个简单的例子,/html代码<divid="win&quo

今天给大家分享Window组件,由于前几天公司在做项目,时间有点紧!所以一直到现在才分享!好的!还是直接进入正题!

还是老样子先举个简单的例子,

/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,//右上角的收缩按钮
实例:
var w=new Ext.Window({
           contentEl:"win",
           width:300,
           height:200,
           buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部
           buttonAlign:"center",//footer部按钮排列位置,这里是中间

           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();

效果图:


其他工具栏方法一样。
 今天的内容比较少!希望大家谅解!不过还是希望能够给学习ExtJS的爱好者一些帮助!如果大家能从中学到一点点东西!那我的努力就没有白费!

最后和大家分享一句哲理“千里冰山非一日之寒”!呵呵!原话可能不是这么说的!大概意思应该就是这样! 我想这句话的意思“你懂的”!

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2