ExtJS 组件添加子组件

本文通过示例展示了如何在 ExtJS 中为父组件添加子组件,并提供了两种实现方式:一种是直接在 items 属性中定义子组件;另一种是在 tbar、bbar 等工具栏配置中添加子组件。同时介绍了如何通过组件的方法访问到父组件。

【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();


转载于:https://my.oschina.net/searone/blog/340385

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值