ExtJS 组件添加子组件

最新推荐文章于 2021-06-03 04:05:20 发布

转载最新推荐文章于 2021-06-03 04:05:20 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/searone/blog/340385

文章标签：

#python

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

2019独角兽企业重金招聘Python工程师标准>>>

【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