Extjs-核心组件

1. Ext.Component

它所有组件都自动享有标准Ext组件的生命周期,创建,渲染,销毁
所有组件都允许在Ext.Container及子类中进行延迟渲染,也可以把组件注册到Ext.ComponentMgr中,可以使用Ext.getCmp()函数直接根据id获取对应的组件
组件大致可以分三类,基本组件,工具条组件,表单组件

2. Ext.BoxComponent

<script type="text/javascript" defer>
	Ext.onReady(function() {
	    var box = new Ext.BoxComponent({
	        style: 'background-color:red;position:absolute;',
	        pageX: 100,
	        pageY: 50,
	        width: 200,
	        height: 150
	    });
	    new Ext.Viewport({
	    	items : [box]
	    });
	});
</script>

3.Ext.Container

继承Ext.BoxComponent,它提供两个重要参数,layou和items

4.Ext.Panel

<script type="text/javascript" defer>
	Ext.onReady(function() {
	   	var panel = new Ext.Panel({
	        title: '测试标题',
	        floating: true,//浮动
	        shadow: true,//阴影
	        draggable: true,//true表示激活此面板的拖放
	        collapsible: true,//true表示此面板是可收缩的
	        html: '测试内容',//一段HTML片段
	        pageX: 100,
	        pageY: 50,
	        width: 200,
	        height: 150
	    });
	    new Ext.Viewport({
	    	items : [panel]
	    });
	});
</script>

5.Ext.TabPanel

如果不指定xytpe,就会默认Ext.Panel

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();
		Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
		var tabs = new Ext.TabPanel({
			width : 400,
		    height : 200,
			activeTab:0,
			items : [{
				title : '标签面板1',
				html : '标签面板1内容'
			}]
		});
		tabs.add({
			title : '标签面板2',
			html : '标签面板2内容'
		});
		new Ext.Viewport({
			items : [tabs]
		});
	});
</script>