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/

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

  • 相关阅读:
    JavaScript 格式化数字
    浅析C#中单点登录的原理和使用
    从银行转账失败到分布式事务:总结与思考
    计算机网络资料
    阿里巴巴Java开发规约插件p3c详细教程及使用感受
    程序员如何打造属于自己的云笔记服务
    sql server2016里面的json功能
    mac pro 开启三只滑动选中文本
    技术网站
    idea gradle项目导入
  • 原文地址:https://www.cnblogs.com/xinchun/p/2131290.html
Copyright © 2011-2022 走看看