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