extjs tabpanel第一次切换不显示 改变浏览器窗口的大小就显示_EXTjs常用的组件方法...

看了白鹤extjs视频学习资料后整理一下

以后用的时候看看

1

选择器时

1 btn.up()/down().属性 参数是选择器或者组件的xtype

2 Ext.getCmp('id').属性

3btn.ownerct.ownerct（父类的父类——爷爷类 子类的子类应该也有 我没查

可能是child?）

2组件

1 ext自带方式

items{
 xtype:button,
 text:'123',
handle:function(btn){
}
}

2new方式^[1]

new EXT.button.button{
//免写xtype
 text:'123',
handle:function(btn){
}

3Window有用的属性

Ext.onReady(function(){

	//Ext.create方法相当于创建一个实例对象
	Ext.create('Ext.window.Window',{
		title:'我的第一个组件,window' ,
		width:400 , 	//Number型  也可以是字符串类型  width: '90%'
		height:300 ,
		layout:'fit' ,
		constrain:true ,		//限制窗口不超出浏览器边界
		modal:true ,			//设置一个模态窗口
		//plain:true ,
		icon:'js/extjs/icons/used/browser_window.png',				//字符串参数,图片的路径
		//iconCls:'' ,   		//CSS样式
		x:50 ,
		y:50 ,
		autoScroll:true,		//添加滚动条
		html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>' ,
		//constrainHeader:true,	//不允许该窗口的title超出浏览器边界
		renderTo:Ext.getBody()	//新创建的组件 渲染到什么位置
	}).show();
	
	
	
	
	
	
	
	
});

3简单的新建窗体

Ext.onReady(function(){

	//ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题
	//第一种实现
	//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
	var btn = Ext.get('btn');		//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);
	btn.on('click',function(){
		if(!Ext.getCmp('mywin')){
			Ext.create('Ext.window.Window',{
				id:'mywin' ,		//如果你给组件加了一个id  那么这个组件就会被Ext所管理
				title:'新窗体' , 
				height:300 ,
				width:400 ,
				renderTo:Ext.getBody() //,
				//modal:true
			}).show();		
		}
	});
	
	//第二种实现
//	var win = Ext.create('Ext.window.Window',{
//				title:'新窗体' , 
//				height:300 ,
//				width:400 ,
//				renderTo:Ext.getBody() ,
//				closeAction:'hide'  //closeAction默认是destroy 
//	});
//	
//	Ext.get('btn').on('click',function(){
//			win.show();
//	});
	
	
	
	
	
	
});

4子组件的作用

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();	
	
	var win = new Ext.Window({
		id:'mywin' ,
		title:'操作组件的形式' ,
		width:500 , 
		height:300 , 
		renderTo:Ext.getBody() , 
		//表示在当前组件的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);
				alert(btn.ownerCt.ownerCt.title);
			}			
		}]		
	});
	win.show();
	
	
	
	
	
	
	
	
	
	
	
	
	
	
});

5window窗口的复杂使用

Ext.onReady(function(){

	
	//ex003:用windowGroup对象去操作多个window窗口
	var wingroup = new Ext.WindowGroup();
	for(var i = 1 ; i <=5;i++){
		var win = Ext.create('Ext.Window',{
			title:'第' + i + '个窗口' , 
			id:'win_' + i , 
			width:300 , 
			height:300 ,
			renderTo:Ext.getBody()
		});
		win.show();
		wingroup.register(win);		//把窗体对象注册给ZindexManger
	}
	
	var btn1 = Ext.create('Ext.button.Button',{
		text:'全部隐藏' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.hideAll();		//隐藏所有被管理起来的window组件
		}
	});
	
	var btn2 = new Ext.button.Button({
		text:'全部显示' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.each(function(cmp){
				cmp.show();
			});
		}		
	});
	
	var btn3 = new Ext.button.Button({
		text:'把第三个窗口显示在最前端' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
		}		
	});	
	
	
	var btn4 = new Ext.button.Button({
		text:'把第五个窗口显示在最末端' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.sendToBack('win_5');	//把当前的组件显示到最后
		}		
	});		
	
	
});

参考

1. ^免写xtype