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 //以上一级组件的形式去查找 OwnerCt 29 //console.info(btn.ownerCt); 30  alert(btn.ownerCt.ownerCt.title); 31  } 32  }] 33  }); 34  win.show(); 35 36 37 });

学习之余给大家推荐一个美文网站 www.fishcmonkey.com,提高文学修养也是好的