ExtJS 动态组件与组件封装

介绍几个有用的函数：

Ext.apply---追加配置选项
Ext.reg,----注册xtype
Ext.extend--扩展组件
||操作（｛｝|| cfg）
fireEvent自定义事件机制

------------------------------------------------------------
组件的显示与刷新：
模版机制：显示格式--------显示数据（动态构建html元素）
数据机制：与后台交互的机制--主要是发出Ajax请求以及接收响应数据
renderer：渲染机制
------------------------------------------------------------

var win = new Ext.Window({
		title:'动态窗口',
		id:'win',
		height:300,
		autoScroll:true,
		layout:'column',
		width:400,
		bbar:[{xtype:'button',text:'添加面板',handler:doAddCom},
			{xtype:'button',text:'添加菜单',handler:doAddMenu}
		],
		tbar:[{xtype:'button',text:'菜单'}],
		items:[]
	});
	
	function doAddCom(){
		var panel = new Ext.Panel({
			html:'添加一xxxxx个组件',
			width:100,
			height:100
		});
		Ext.getCmp("win").add(panel);//核心
		Ext.getCmp("win").doLayout();//页面进行重新绘制
	}
	
	function doAddMenu(){
		var btn = new Ext.Button({
			text:'编辑'
		});
		Ext.getCmp("win").getTopToolbar().add(btn)//动态添加组件
		Ext.getCmp("win").doLayout();
	}

=====================================================================================================

对于一些通过JS动态创建的组件，如果要再次显示，需要调用组件的doLayout,通过这个方法，将会触发组件的重绘事件，对组件进行重新渲染，方可在界面显示效果。