ext的border布局以及对其中的板块进行show和hide

ext的border布局，把界面分成左中右三个板块（要做超级复杂的布局，可以参考ext的官方demo）。

在Ext.onReady(function() { }之间的主要代码如下：

//整体页面布局
	var viewport = new Ext.Viewport({
		layout:'border',
		border:false,
		items:[{
		    	   xtype:'panel',
		    	   region:'west',
		    	   layout:'fit',
		    	   width:document.body.clientWidth*0.15,
	    	  	   items:[moudletreePanel],
		       },{
		    	   xtype:'panel',
		    	   region:'center',
		    	   layout:'fit',
		    	   width:document.body.clientWidth*0.6,
		    	   items:[datagrid],
		       },{
		    	   xtype:'panel',
		    	   region:'east',
		    	   id:'operationSet',
		    	   layout:'fit',
		    	   hidden:true,
		    	   width:document.body.clientWidth*0.25,
		    	   items:[opergrid]
		       }
		]
	});

可见，三个panel板块里面的items，其值也是panel，注意，这三个面板可以设置id值，我在右边板块（east）设了id为operationSet，对他进行显示/隐藏。当然，title属性也是可以加上去的。测试时分别把items属性去掉，换成html属性，如

html: '<span><a href="#" οnclick="show();">show</a></span>'

这样就有个响应按钮了，当然，有了show()怎能没有hide()，所以html的属性值可以改为：

<span>
<a href="#" οnclick="show();">show</a> <br> <a href="#" οnclick="hide();">hide</a>
</span>

接着，要写show、hide的公共函数，注意了，一定要是公共函数，也就是说，写在Ext.onReady(function() { }的外面。函数如下

function hide(){
	Ext.getCmp("operationSet").hide();
	Ext.getCmp("operationSet").ownerCt.doLayout();//刷新
}
function show(){
	Ext.getCmp("operationSet").show();
	Ext.getCmp("operationSet").ownerCt.doLayout();//刷新
}

备注：本实例在ext4上可以运行，应该可以向下版本兼容。