zoukankan      html  css  js  c++  java
  • ExtJS 基础解析之【Ext.Window】

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

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

    /html代码
    <div id="win" class="x-hidden">
    </div>
    //js代码
    var w=new Ext.Window({
               contentEl:"win",//主体显示的html元素,也可以写为el:"win"
               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",
               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",
               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的爱好者一些帮助!如果大家能从中学到一点点东西!那我的努力就没有白费!

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

    作者:青苹果
    座右铭:不断的反省自己!然后加以改变!
    感兴趣的技术:.NET、数据库、JavaScript、C#、ajax、winform、jquery、extjs
    本文出处:http://www.cnblogs.com/xinchun/

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    统计nginx日志里访问次数最多的前十个IP
    while 格式化输出 运算符 字符编码
    Python 软件安装
    Python 基础
    Typora 基础的使用方法
    Django ORM (四) annotate,F,Q 查询
    Django 惰性机制
    Django ORM (三) 查询,删除,更新操作
    Django ORM (二) 增加操作
    Django ORM (一) 创建数据库和模型常用的字段类型参数及Field 重要参数介绍
  • 原文地址:https://www.cnblogs.com/xinchun/p/2131290.html
Copyright © 2011-2022 走看看