此文用来记录学习笔记;
今天再来一个例子巩固一下学习的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,提高文学修养也是好的