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,提高文学修养也是好的