ExtJs6 理解 -- Ext.app.Container (Ext 容器)

       Container 顾名思义就是容器，是Ext.Component的基类，容器可以对包含的组件的进行：添加，插入和删除等处理。

1、最常用的容器类有：

• Ext.panel.Panel

• Ext.window.Window

• Ext.tab.Panel        

• 开发者自定义容器         

   例： 自定义Container:

Ext.onReady(function() {
	Ext.create('Ext.container.Container', {
		layout : {
			type : 'vbox'
		},
		margin: 20,
		width : 800,
		height : 600,
		defaults : { // 应用在所有子组件上
			scrollable : true,
			labelWidth: 50
			items : [{
				xtype : 'button',
				bodyStyle : 'background-color:gray'
			}]
		},		
		flex : 1,
		items : [{
			xtype : 'textfield',
			fieldLabel : '姓名',
			name : 'name'
		}, {
			xtype : 'textfield',
			allowBlank : false,
			vtype : 'email',
			fieldLabel : '邮箱',
			name : 'email'
			
		}, {
			xtype : "button",
			text : "提交"
		} ],
		renderTo : Ext.getBody()
	});
});

运行截图：

                                     

2、在容器内部定义container 即： xtype：'container' 

Ext.onReady(function(){
	Ext.define('Mycontainer',{
		extend: 'Ext.window.Window',
		closable:true,
		boder : false,
		referenceHolder: true,
		items:[{
			xtype: 'container',
	        referenceHolder: true,
	        reference: 'innerCt1',
	        layout:'vbox',
	        items:[{
	        	
	                xtype: 'textfield',
	                fieldLabel:'姓名',
	                reference: 'a',
	                id: 'a1',
	                labelWidth:50
	            
	        },{
	        	
                xtype: 'textfield',
                fieldLabel:'密码',
                reference: 'b',
                inputType:'password',
                id: 'b1',
                labelWidth:50
        }]
		}]
	});
	var c =  Ext.create('Mycontainer');
	c.show();
	var inner = c.lookupReference('innerCt1');
	var updateClock= function(){
		console.log(inner.lookupReference('a').getValue());
	};
	var runner = Ext.create('Ext.util.TaskRunner');
	var task = runner.newTask({
		run:function(){
			updateClock();
		},
		interval :1000
	});
	task.start();
	c.on('close',function(){
		task.stop();
	})
});