请教大家如何将页面的布局做成图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
		});
	});

评论

3 楼 fangzhouxing 2008-09-17  

建议使用AutoTableFormLayout:

如：
getRecordItems : function() {
return [{
fieldLabel : "1、系统布线",
labelSeparator : "",
xtype : 'formHtml',
value : ''
}, {
fieldLabel : "敷设方式",
name : 'record01',
readOnly : this.readOnly,
width : 338,grow : true,growMin: 20,xtype : 'textarea',
items : [this.getCombo('result01')]
}, {
fieldLabel : "",
labelSeparator : "",
xtype : 'formHtml',
value : '传输导线及截面积'
}, {
fieldLabel : "导线截面积",
name : 'record02',
readOnly : this.readOnly,
width : 338,grow : true,growMin: 20,xtype : 'textarea',
items : [this.getCombo('result02')]
}, {
fieldLabel : "导线电压等级",
name : 'record03',
readOnly : this.readOnly,
width : 338,grow : true,growMin: 20,xtype : 'textarea',
items : [this.getCombo('result03')]

2 楼 kaki 2008-02-17  

利用两个fieldset处理，的确很方便。


fieldset内部横排就会找不到label，利用两个fieldset横排，fieldset内部还是竖排，呵呵！

十分感谢。

1 楼 crabboy 2008-02-16  

老大：给你一个例子看看。这个例子完全基于面向对象方式写的，用到了extjs（2.0）的继承。代码很优雅，你看看，可能对你有用。

ComplainFormWindow= function(){
   
         this.complainForm= new Ext.form.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'ComplainControlLayer.aspx',
            frame:true,
        //title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 500,
            items: [{
              layout:'column',
              items:[{
                    columnWidth:.48,
                    layout: 'form',
                    xtype:'fieldset',
                    title: 'Personal Information',                
                    autoHeight:true,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '<b>First Name</b>',
                        name: 'fName',
                        allowBlank:false, 
                        //vtype:'alphaText',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: '<b>M Name</b>',
                        name: 'mName',
                        anchor:'95%'
                    }
                    ,
                     {
                        xtype:'textfield',
                        fieldLabel: '<b>Last Name</b>',
                        allowBlank:false,
                        name: 'lName',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.48,
                    layout: 'form',
                    xtype:'fieldset',
                    title: '<b>Other Information</b>',
                    labelWidth:60,                
                    autoHeight:true,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '<b>Address</b>',
                        allowBlank:false,
                        name: 'address',
                        anchor:'95%'
                        },{
                        xtype:'textfield',
                        fieldLabel: '<b>E-mail Add</b>',
                        name: 'e-mail',
                        allowBlank:true,
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
        },{
            layout: 'form',
            xtype:'fieldset',
            title: '<b>Insert Comment</b>',
            autoHeight:true,
            items:[{
                xtype:'textarea',
                name:'comment',
                allowBlank:false,
                hideLabel:true,          
                height:120,
                anchor:'98%'
            }]
        
        /*
            xtype:'textfield',
            name:'comment',
            labelAlign: 'top',
           // id:'bio',
            fieldLabel:'Comment',
            autoHeight:true,
            anchor:'98%'*/

        }],
        buttons: [{
            text: 'Save',
           /* onClick:function(){
                if(that.complainForm.form.isValid())
                {
                    that.complainForm.form.submit({params:{
					            requestData: 'adddept'},
					            failure: function() {
							 //   Ext.MessageBox.alert('Error Message',"fail");
							        alert('h');
						    	},
							    success: function() {
							        //win.close();
							    }
					           /* reID: this.refID,
					            maiID: this.mainID,
					            comSubject:this.subject,
					            depID:this.deptID					            					 */
			/*		        });
		        }
		        else{
		            alert('hi');
		        }
            }*/
            handler:this.formSubmit,
            scope:this
        },{
            text: 'Cancel',
            handler: function(){
                this.hide();            
            },
            scope:this
            
        }]


         });           
    ComplainFormWindow.superclass.constructor.call(this, {
         title: 'Layout Window',
         closable:true,
         width:800,
         height:475,
         closeAction:'hide',
         layout: 'fit',
         items:this.complainForm
    });
}
Ext.extend(ComplainFormWindow,Ext.Window,{
    formSubmit: function(){
        
         if(this.complainForm.form.isValid())
         {
           this.complainForm.form.submit({params:{
					            requestData: 'addnewcomplain'},
					            failure: function() {
							 //   Ext.MessageBox.alert('Error Message',"fail");
							        alert('h');
						    	},
							    success: function() {
							        //win.close();
							    }
					           /* reID: this.refID,
					            maiID: this.mainID,
					            comSubject:this.subject,
					            depID:this.deptID					            					 */
					        });
         }
         else{
            Ext.Msg.alert('Complain Submit', 'Enter the Field');


         }
    
    }
});



Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
           win = new ComplainFormWindow();
        }
        win.show(this);
    });
});

你要的结果关键之处在:

layout:'column',

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Hello World Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script language="javascript" src="hello.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />

    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->

<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />


</body>
</html>