程序博客网 > 大数据采集系统源代码

ExtJs——Ext.window.Window

来源：互联网 发布：大数据采集系统源代码 编辑：程序博客网 时间：2024/06/03 17:31
微信小程序实战项目——点餐系统      程序员11月书讯，评论得书啦      Get IT技能知识库，50个领域一键直达

4、ExtJs——Ext.window.Window

modal:true,
弹出后原页面变灰不可编辑
window事件：
listeners : { "minimize":function(){ Ext.Msg.alert("提示","最小化"); }, "beforehide" : function() { Ext.Msg.alert("提示", "要隐藏吗?"); // return true; }, "show":function(){ // Ext.Msg.alert("提示","你好！我来也。"); }, "hide" : function() { Ext.Msg.alert("提示", "再见！"); } "close":function(){ Ext.Msg.alert("提示","窗口关闭！"); mainWindow.destroy(); } },

    第一个组件：Ext.window.Window。对于组件，也就是Ext最吸引开发者的地方。
    - xtype：组件的别名 
    - Hierarchy 层次结构 
    - Inherited mixins 混入的类 
    - Requires 该组件需要使用的类
    - configs：组件的配置信息 
    - properties：组件的属性
    - methods：组件的方法

    - events：组件的事件

    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. Ext.onReady(function(){  
    2.       
    3.     //Ext.create方法相当于创建一个实例对象  
    4.     Ext.create('Ext.window.Window',{  
    5.         title:'我的第一个组件',  
    6.         width:400,   //Number型，也可以是字符串类型 width:'90%'  
    7.         height:300,  
    8.         layout:'fit',  
    9.         renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置  
    10.     }).show();                   //需要此方法，因为默认是隐藏的  
    11.       
    12. });  

    window组件常用属性和方法讲解:
     configs：
    - constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)
    - modal:布尔值，true为设置模态窗口。默认为false
    - plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false
    - x、y 设置窗口左上角坐标位置。
    - onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。
    - closeAction：string值，默认值为'destroy'，可以设置'hide'关闭时隐藏窗口
    - autoScroll：布尔值，是否需要滚动条，默认false

    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. Ext.onReady(function(){  
    2.       
    3.     //Ext.create方法相当于创建一个实例对象  
    4.     Ext.create('Ext.window.Window',{  
    5.         title:'我的第一个组件',  
    6.         width:400,   //Number型，也可以是字符串类型 width:'90%'  
    7.         height:300,  
    8.         layout:'fit',  
    9.         constrain:true,          //限制窗口不超出浏览器边界  
    10.         constrainHeader:true,    // 不允许该窗体标题超出浏览器边界  
    11.         modal:true,              //设置一个模态窗口  
    12.         plain:true,  
    13.         icon:'js/ExtJs/icons/used/browser_window.png',               //图片路径  
    14.         iconCls:'',             //css样式  
    15.         x:50,  
    16.         y:50,  
    17.         html:'<div style=width:200px;height=200px>我是一个div</div><div style=width:200px;height=200px>我是第二个div</div>',  
    18.         autoScroll:true,  
    19.         renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置  
    20.           
    21.     }).show();                   //需要此方法，因为默认是隐藏的  
    22.       
    23. });  

    •ExtWeb实战300例：
    –例1:点击按钮打开一个window，window重复创建的问题
    •重点分析：这个问题是初学者经常会犯错的地方，一般来说简单的代码不会产生此问题，但是如果以后代码复杂以后，这个问题如果发生调试起来会非常麻烦！！
    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. Ext.onReady(function(){  
    2.     //ex001:点击一个按钮，打开一个新的窗体  
    3.       
    4.     //JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);  
    5.     var btn = Ext.get('btn');       //这个元素是经过Ext包装的一个Ext的Dom对象  
    6.     alert(btn.value);   //undefined  
    7.     alert(btn.dom.value);  
    8.     btn.on('click',function(){  
    9.         if(!Ext.getCmp('mywin')){  
    10.         Ext.create('Ext.window.Window',{  
    11.             id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理  
    12.             title:'新窗体',  
    13.             height:200,  
    14.             width:300,  
    15.             renderTo:Ext.getBody()  
    16. //          modal:true  
    17.         }).show();}  
    18.     });  
    19. });  
    第二种实现：

    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. var win = Ext.create('Ext.window.Window',{  
    2.         id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理  
    3.         title:'新窗体',  
    4.         height:200,  
    5.         width:300,  
    6.         renderTo:Ext.getBody(),  
    7.         closeAction:'hide'   //closeAction默认是destroy，销毁  
    8.     });  
    9. Ext.get('btn').on('click',function(){  
    10.     win.show();  
    11. });  



    例2: 在window中添加子组件，并讲解常用查找组件的方式：
    重点分析：该实例主要针对于组件的查找进行详细的讲解，在以后的应用开发中，应该学会各种方式去查找所需要的组件，不要拘泥于某种特定形式，这样会给开发思路带来很多好处。
    - ownerCt
    - up/down方法
    - Ext.getCmp方法

    添加子组件：

    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. Ext.onReady(function(){  
    2. //在组件中添加子组件，并进行一系列针对于组件的操作  
    3.     var win = new Ext.window.Window({  
    4.         title:'添加子组件',  
    5.         width:400,  
    6.         height:300,  
    7.         renderTo:Ext.getBody(),  
    8.         draggable:false,        //不允许拖拽  
    9.         resizable:false,         //不允许改变大小  
    10.         closable:false,            //不显示关闭按钮  
    11.         collapsible:true,            //允许折叠  
    12.         bodyStyle:'background:#ffc;padding:10px',   //设置样式  
    13.         html:'我是window的内容',  
    14.         //Ext items（array）  配置子组件的配置项  
    15.         items:[{  
    16.         //Ext的组件给我们提供了一个简单地写法  xtype属性去创建组件  
    17.         xtype:'panel',  
    18.         width:'50%',  
    19.         height:100,  
    20.         html:'我是面板'  
    21.         },  
    22.         //第二种方法，直接new一个对象  
    23.         new Ext.button.Button({  
    24.             text:'我是按钮new',  
    25.             handler:function(){  
    26.                 alert('我被点击了');  
    27.                 alert(this.text);  
    28.             }  
    29.         })  
    30. //          {        //第一种方法，使用xtype声明  
    31. //      xtype:'button',  
    32. //      text:'我是按钮',  
    33. //      handler:function(btn){  
    34. //          alert('我被点击了');  
    35. //          alert(btn.text);  
    36. //      }  
    37. //        
    38. //      }  
    39.           
    40.         ]  
    41.     });   
    42.     win.show();  
    43. });  

    操作子组件：

    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. //在组件中操作子组件  
    2. var win = new Ext.Window({  
    3.     id:'mywin',  
    4.     title:'操作组件的形式',  
    5.     width:500,  
    6.     height:300,  
    7.     renderTo:Ext.getBody(),  
    8.     //表示在当前组件的top位置添加一个工具条，工具条中包含几个按钮，使用数组形式  
    9.     tbar:[{             //bbar(bottom)   lbar(leftbar)  rbar(rightbar  fbar(footbar))  
    10.         text:'按钮1',  
    11.         handler:function(btn){  
    12.             //组件都会有up和down这两个方法，表示向上或向下查找，需要参数是组件的xtype或者选择器  
    13.             alert(btn.up('window').title);  
    14.         }  
    15.     },{  
    16.         text:'按钮2',  
    17.         handler:function(btn){  
    18.             //最常用的方式  
    19.             alert(Ext.getCmp('mywin').title);  
    20.         }  
    21.     },{  
    22.         text:'按钮3',  
    23.         handler:function(btn){  
    24.             //以上一级组件的形式去查找OwnerCt  
    25.             alert((btn.ownerCt.ownerCt).title);  
    26.         }  
    27.     }]           
    28. });  
    29. win.show();  
    例3: windowGroup对象 操作window组
    重点分析：该实例主要目的针对于特殊需求进行具体的实现，利用windowGroup去操作多个窗体同步执行某些任务，这有点类似于javascript里的组合模式，原理就是上级负责执行一个动作但并不真正去执行，而是分别传递给所有的下级组件去具体执行。
    - register
    - hideAll
    - each
    [javascript] view plain copy
    print?在CODE上查看代码片派生到我的代码片
    1. Ext.onReady(function(){  
    2. //用windowGroup对象去操作多个window窗口（4.0后，叫做ZIndexManager）  
    3.       
    4.     var wingroup = new Ext.WindowGroup();  
    5.     for(var i = 1; i<= 5;i++){  
    6.         var win = Ext.create('Ext.Window',{  
    7.             title:'第' + i + '个窗口',  
    8.             id:'win_' + i,  
    9.             width:300,  
    10.             height:300,  
    11.             renderTo:Ext.getBody()  
    12.         });  
    13.         win.show();  
    14.         wingroup.register(win);         //把窗体对象注册给ZIndexManager  
    15.               
    16.     }  
    17.     var btn1 = Ext.create('Ext.button.Button',{  
    18.         text:'全部隐藏',  
    19.         renderTo:Ext.getBody(),  
    20.         handler:function(){  
    21.             wingroup.hideAll();        //隐藏所有被管理起来的window组件  
    22.         }  
    23.           
    24.     });  
    25.       
    26.     var btn2 = new Ext.button.Button({  
    27.         text:'全部显示',  
    28.         renderTo:Ext.getBody(),  
    29.         handler:function(){  
    30.             wingroup.each(function(cmp){  
    31.                 cmp.show();  
    32.             });  
    33.         }  
    34.     });  
    35.       
    36.         var btn3 = new Ext.button.Button({  
    37.         text:'把第三个窗口显示最前',  
    38.         renderTo:Ext.getBody(),  
    39.         handler:function(){  
    40.             wingroup.bringToFront('win_3');  //把当前组件显示到最前端  
    41.               
    42.         }  
    43.     });  
    44.       
    45.     var btn4 = new Ext.button.Button({  
    46.         text:'把第五个窗口显示在最后',  
    47.         renderTo:Ext.getBody(),  
    48.         handler:function(){  
    49.             wingroup.sendToBack('win_5');  //把当前组件显示到最后  
    50.               
    51.         }  
    52.     });  
    53. });  



    顶
    0
    踩
    0
     
     

    我的同类文章

    http://blog.csdn.net
    • •EXTJS4 新特性之Ext.data.Model2014-09-25
    • •11、ExtJs——数据模型2014-09-25
    • •9、ExtJs——Ext基础架构--事件机制2014-09-24
    • •7、ExtJs——Ext基础架构--动态加载js文件--很重要2014-09-19
    • •5、ExtJs——Ext基础架构--define定义一个类2014-09-17
    • •12、ExtJs——数据代理-proxy2014-09-25
    • •10、ExtJs——类的声明、对象创建及关键字2014-09-24
    • •8、ExtJs——Ext基础架构--Ext操作DOM2014-09-23
    • •6、ExtJs——Ext基础架构--认识Ext.js和Ext-more.js2014-09-19
    • •3、ExtJs——JavaScript基础2014-09-16
    更多文章

    参考知识库

    img

    jQuery知识库

    img

    JavaScript知识库

    img

    AngularJS知识库

    更多资料请参考：
    猜你在找
    Extjs在Asp.Net中的应用开发
    Windows Server 2012 Hyper-v 管理
    Windows Server 2012 高可用性管理
    在Windows下SVN的版本管理与实战
    Windows Server 2012 DHCP Server 管理
    ExtJS 常见问题解答
    javascript变量的作用域--ExtJS scope必备法宝
    EXTNET复杂布局二报表
    Extjs的作用域讲解转载
    JAVA开发全集
    查看评论

      暂无评论

    您还没有登录,请[登录]或[注册]
    * 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
    快速回复TOP
    核心技术类目
    全部主题HadoopAWS移动游戏JavaAndroidiOSSwift智能硬件DockerOpenStackVPNSparkERPIE10EclipseCRMJavaScript数据库UbuntuNFCWAPjQueryBIHTML5SpringApache.NETAPIHTMLSDKIISFedoraXMLLBSUnitySplashtopUMLcomponentsWindows MobileRailsQEMUKDECassandraCloudStackFTCcoremailOPhoneCouchBase云计算iOS6RackspaceWeb AppSpringSideMaemoCompuware大数据aptechPerlTornadoRubyHibernateThinkPHPHBasePureSolrAngularCloud FoundryRedisScalaDjangoBootstrap
    0 0
    大数据采集系统源代码 大数据采集系统源代码
    原创粉丝点击
    热门IT博客
    电力工程结算软件电力工程结算软件
    键盘打字手指软件键盘打字手指软件
    映射网络驱动器不成功
    人工智能的运用领域
    淘宝天猫品牌旗舰店
    淘宝网帽子
    百度股票数据接口api
    直通车助手软件
    学生宿舍管理系统c语言
    数据人生完本
    广州淘宝托管公司
    windows keynote
    c#和c语言什么关系
    一个月工资3000 知乎
    php-fpm 1000并发量
    自古枪兵幸运e 知乎
    artisto 人工智能
    淘宝男皮鞋
    笛子软件下载
    淘宝里食品类目划分
    热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 海贼之究极破坏王第八区 八极灵数的组合方式 八极武神免费阅读 漫威之八极天 八极加劈挂神鬼都害怕 异界风流神帝 八极书生 我有一座花果山 八极大狂风 八核相当于骁龙多少 高通sdm710八核怎么样 八核 高通msm8953八核 高通msm8593八核 高通sdm660八核 高通msm8940八核 高通sdm450八核好不好 高通msm8490八核 高通sdm450八核 四核八线程 核 手机八核是什么意思 八核和四核有什么区别 4核和8核有什么区别 8核手机排行榜 八核是什么意思 真八核 手机6核和8核的区别 八核手机排行榜 手机八核 手机4核和8核的区别 8核和4核的区别 8核 手机8核是什么意思 八核手机 联发科八核手机 千元八核手机 八核千元手机 八核主机 极速八核手机 电脑八核 e5八核 八核笔记本

    程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里