请教大家如何将页面的布局做成图2的那样？？

刚刚学习ext,请教大家如何才能让图一变成图二那样？？

Ext.onReady(function() {

	Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';

	var bd = Ext.getBody();

	var recordType = Ext.data.Record.create([ {
		name : "dm",
		type : "string",
		mapping : 'dm'
	}, {
		name : "sjdm",
		type : "string"
	}, {
		name : "mkmc",
		type : "string"
	}, {
		name : "yxws",
		type : "string"
	}, {
		name : "bzw",
		type : "string"
	}, {
		name : "xz",
		type : "string"
	}, {
		name : "wz",
		type : "string"
	}]);

	var ds = new Ext.data.Store( {
		proxy : new Ext.data.DWRProxy(mktreeBus.getjsondatastor),
		reader : new Ext.data.DWRJsonReader( {
			totalProperty : "results",
			autoLoad : true,
			root : 'rows',
			successProperty : 'success',
			fields : ['dm', 'sjdm', 'mkmc', 'xz', 'wz', 'bzw', 'yxws']
		}, recordType)
	});

	ds.load();

	/*
	 * function myRenderer(val) { if (val > 1998) return '<span
	 * style="color:green;">' + val + '</span>'; return '<span
	 * style="color:red;">' + val + '</span>'; }
	 */

	var cm = new Ext.grid.ColumnModel([ {
		header : 'NO.',
		renderer : function(value, cellmeta, record, rowIndex) {
			return rowIndex + 1;
		},
		width : 30
	}, {
		id : 'qxdm',
		header : '权限代码',
		dataIndex : 'dm',
		width : 85,
		hidden : false,
		sortable : true
	}, {
		header : '父权代码',
		dataIndex : 'sjdm',
		width : 85
	}, {
		header : '模块名称',
		dataIndex : 'mkmc',
		width : 120,
		hidden : false,
		sortable : true
	},

	{
		header : '链接名称',
		dataIndex : 'wz',
		width : 240
	},  {
		header : '标志位',
		dataIndex : 'bzw',
		width : 50,
		hidden : false
	}, {
		header : '节点性质',
		dataIndex : 'xz',
		width : 70,
		hidden : false
	},{
		header : '有效标志',
		dataIndex : 'yxbz',
		width : 60
	}]);

	// ///

		var rsm = new Ext.grid.RowSelectionModel( {
			singleSelect : true,
			listeners : {
				rowselect : function(sm, row, rec) {
					Ext.getCmp("member-form").getForm().loadRecord(rec);
				}
			}
		});

		// //
		function addNew() {
			var r = rsm.getSelected().copy();
			r.data['id'] = '';
			r.data['Name'] = '';
			var grid = Ext.getCmp("member-grid");
			grid.stopEditing();
			ds.insert(0, r);
			ds.commitChanges();
			grid.getView().refresh();

		}
		function deleteRec() {
			if (rsm.getCount() < 1)
				return;
			var r = rsm.getSelected();
			var grid = Ext.getCmp("member-grid");
			grid.stopEditing();
			ds.remove(r);
			ds.commitChanges();
			grid.getView().refresh();
		}
		var gridForm = new Ext.FormPanel( {
			id : 'member-form',
			frame : true,
			labelAlign : 'left',
			title : '基本权限信息维护',
			bodyStyle : 'padding:5px',
			width : 798,
			height : 498,
			//layout : 'column', // 以列方式布局
			items : [ {
				columnWidth : 0.6,
				layout : 'fit',// 左边列放列表
					items : {
						xtype : 'grid',
						ds : ds,
						cm : cm,
						sm : rsm,
						id : 'member-grid',
						title : '业务列表',
						border : true,
						stripeRows : true,
						frame : true,
						height : 250,
						tbar : [ {
							text : '新增',
							tooltip : '新增会员'
						// handler : addNew
								}, '-', {
									text : '删除',
									tooltip : '删除会员 '
								// handler : deleteRec
								}],
						listeners : {
							render : function(g) {
								g.getSelectionModel().selectRow(0);
							},
							delay : 10
						// Allow rows to be rendered.
						}
					}
				}, {
					xtype : 'fieldset',
					columnWidth : 0.4,// 右边列放编辑板
					labelWidth : 90,
					title : '系统数据明细',
					// layout : 'column',
					defaultType : 'textfield',
					autoHeight : true,
					border : false,
					bodyStyle : Ext.isIE
							? 'padding:0 0 5px 15px;'
							: 'padding:10px 15px;',
					style : {
						"margin-left" : "10px", // when you add custom margin in
						// IE
						// 6...
						"margin-right" : Ext.isIE6 ? (Ext.isStrict
								? "-10px"
								: "-13px") : "0" // you have to adjust for it
					// somewhere else: ['dm', 'sjdm', 'mkmc', 'xz', 'wz', 'bzw',
					// 'yxws']
					},
					items : [ {
						fieldLabel : '系统权限',
						name : 'mkmc',
						allowBlank : false,
						minLength : 3,
						maxLength : 8,
						anchor : '.2'
					}, {
						fieldLabel : '上级代码',
						name : 'sjdm',
						anchor : '.2'
					}, {
						fieldLabel : '调用数据',
						name : 'wz',
						// xtype : 'TextArea',
							anchor : '.2'

						}, {
							fieldLabel : '标志位',
							name : 'bzw',
							layout : 'form',
							anchor : '.4'
						}, {
							fieldLabel : '业务性质',
							layout : 'form',
							name : 'xz',
							anchor : '.4'
						},{
						fieldLabel : '系统代码',
						name : 'dm',
						hideLabel:true,
						hidden :true,
						anchor : '.2'
					}],
					buttons : [ {
						text : '修改',
						handler : function() {
							var frm = Ext.getCmp("member-form").getForm();
							if (frm.isValid()) {
								// alertValue(rsm.getSelections());
							save();
							 (rsm.getSelections());
							frm.updateRecord(rsm.getSelected());
						}
					}
				}, {
					text : '清空',
					handler : function() {
						var frm = Ext.getCmp("member-form").getForm();
						frm.reset();
					}
				}	]
				}],
			renderTo : bd
		});
	});