EXTJS, Viewport区域自动适应

[img]http://dl.iteye.com/upload/picture/pic/96686/13106708-4c0b-3277-927c-8daf52971297.jpg[/img]
[img]http://dl.iteye.com/upload/picture/pic/96684/fa5be143-4758-3b6c-adb4-6f56d1681c7c.jpg[/img]

Ext.ns('EXT.YAYADU.UI');


EXT.YAYADU.UI.CAutoFit = Ext.extend(Ext.Panel, {
	iGrid : null,
	iForm : null,
	constructor : function(_cfg)
	{
		Ext.apply(this, (_cfg || {}));

		this.iForm = new Ext.form.FormPanel
		({
			title : '搜索',
			border : false,
			layout : 'form',
			labelWidth : 65,
			bodyStyle : 'padding : 5px;',
			labelAlign : 'right',
			items : [{
				xtype : 'panel',
				border : false,
				layout : 'column',
				items : [{
					columnWidth : .45,
					layout : 'form',
					labelWidth : 65,
					labelAlign : 'right',
					border : false,
					defaults : {xtype : 'textfield', anchor : '93%'},
					items : [{
						fieldLabel : '姓名'
					}, {
						xtype : 'combo',
						fieldLabel : '职位'
					}]
				}, {
					columnWidth : .45,
					layout : 'form',
					labelWidth : 65,
					labelAlign : 'right',
					border : false,
					defaults : {xtype : 'textfield', anchor : '93%'},
					items : [{
						xtype : 'combo',
						fieldLabel : '学历'
					}, {
						fieldLabel : '住址'
					}]
				}, {
					columnWidth : .1,
					layout : 'form',
					labelWidth : 65,
					labelAlign : 'right',
					border : false,
					defaults : {xtype : 'button', anchor : '98%'},
					items : [{
						text : '查询'
					}, {
						text : '清空'
					}]
				}]
			}]
		});

		this.iGrid = new Ext.grid.GridPanel
		({
			title : '信息',			
			border : false,
			cm : new Ext.grid.ColumnModel([
				{header : '姓名'},
				{header : '年龄'},
				{header : '职位'},
				{header : '学历'},
				{header : '住址'}
			]),
			sm : new Ext.grid.RowSelectionModel(),
			store : new Ext.data.JsonStore(),
			bbar : [{
				text : '确定'
			}, '-', {
				text : '取消'
			}]
		});
		EXT.YAYADU.UI.CAutoFit.superclass.constructor.call(this, {			
			layout : 'border',
			border : false,
			items : [{
				region : 'north',
				xtype : 'panel',
				height : 85,
				border : false,
				layout : 'fit',
				items : [this.iForm]
			}, {
				region : 'center',
				xtype : 'panel',
				border : false,
				layout : 'fit',
				items : [this.iGrid]
			}]
		});		

	}
});

Ext.onReady(function()
{
	var iPanel = new EXT.YAYADU.UI.CAutoFit();
	new Ext.Viewport({
		layout : 'border',
		border : false,
		items : [{
			region : 'west',
			width : 150,			
			split : true,
			items : [{
				xtype : 'panel',	
				border : false,
				title : '导航菜单'
			}]
		}, {
			region : 'center',			
			layout : 'fit',
			items : [iPanel]
		}]
	});

});