【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' , //用一个xtype相当于new一个对象。
// text:'我是按钮',
// handler:function(btn){
// alert('我被点击了');
// alert(btn.text);
// }
// }
]
});
win.show(); */
【2 添加子组件 使用 tbar , bbar , 等】
//第二种方法添加子组件, tbar config 属性
var win = new Ext.Window({
id:'mywin' ,
title:'操作组件的形式' ,
width:500 ,
height:300 ,
renderTo:Ext.getBody() ,
//tbar表示在当前组件的top位置添加一个工具条
tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar) fbar(footbar)
text:'按钮1' ,
handler:function(btn){
//组件都会有 up、down 这两个方法(表示向上、或者向下查找) 需要的参数是组件的xtype或者是选择器
alert(btn.up('window').title);
}
},{
text:'按钮2' ,
handler:function(btn){ // 【 推荐使用 】
//最常用的方式
alert(Ext.getCmp('mywin').title);
}
},{
text:'按钮3' ,
handler:function(btn){
//以上一级组件的形式去查找 OwnerCt
//console.info(btn.ownerCt);//上一级 是 tbar
alert(btn.ownerCt.ownerCt.title);
}
}]
});
win.show();