首页 > 代码库 > Ext JS学习第六天 Ext_window组件（三）
Ext JS学习第六天 Ext_window组件（三）
此文用来记录学习笔记；
今天再来一个例子巩固一下学习的window；
–例2: 在window中添加子组件，并讲解常用查找组件的方式：
•重点分析：该实例主要针对于组件的查找进行详细的讲解，在以后的应用开发中，同学们应该学会各种方式去查找所需要的组件，不要拘泥于某种特定形式，这样会给开发思路带来很多好处。
–ownerCt
–up/down方法
–Ext.getCmp方法
附上栗子代码1
Ext.onReady(function(){ //ex002 : 在组件中添加子组件 ,并进行一系列针对于组件的操作 //在组件中添加子组件： var win = new Ext.window.Window({ title:"添加子组件实例" , width:‘40%‘ , height:400 , renderTo:Ext.getBody() , draggable:false , //不允许拖拽 resizable:false , //不允许改变窗口大小 closable:false, //不显示关闭按钮 collapsible:true , //显示折叠按钮 bodyStyle: ‘background:#ffc; padding:10px;‘ , // 设置样式 html:‘我是window的内容!!‘ , //Ext items(array) 配置子组件的配置项 items:[{ //Ext的组件 给我们提供了一个简单的写法 xtype属性去创建组件 xtype:‘panel‘, width:‘50%‘, height:100 , html:‘我是面板‘ }, //第一种写法 new Ext.button.Button({ text:‘我是按钮‘ , handler:function(){ alert(‘执行!!‘); } }) //第二种写法// {// xtype:‘button‘ , // text:‘我是按钮‘,// handler:function(btn){// alert(‘我被点击了‘);// alert(btn.text);// }// } ] }); win.show(); });栗子代码2
1 Ext.onReady(function(){ 2 3 //ex002 : 在组件中添加子组件 ,并进行一系列针对于组件的操作 4 5 6 var win = new Ext.Window({ 7 id:‘mywin‘ , 8 title:‘操作组件的形式‘ , 9 width:500 , 10 height:300 , 11 renderTo:Ext.getBody() , 12 //表示在当前组件的top位置添加一个工具条13 tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar) fbar(footbar)14 text:‘按钮1‘ ,15 handler:function(btn){16 //组件都会有 up、down 这两个方法(表示向上、或者向下查找) 需要的参数是组件的xtype或者是选择器17 alert(btn.up(‘window‘).title);18 }19 },{20 text:‘按钮2‘ , 21 handler:function(btn){22 //最常用的方式23 alert(Ext.getCmp(‘mywin‘).title);24 }25 },{26 text:‘按钮3‘ ,27 handler:function(btn){28 //以上一级组件的形式去查找 OwnerCt29 //console.info(btn.ownerCt);30 alert(btn.ownerCt.ownerCt.title);31 } 32 }] 33 });34 win.show();35 36 37 });学习之余给大家推荐一个美文网站www.fishcmonkey.com,提高文学修养也是好的
Ext JS学习第六天 Ext_window组件（三）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。