请教:表单里的元素如何横着放

我的表单中有5个TextField元素，
默认情况下各表单元素是竖着放着，
请问该如何设置才能把各元素横着放，就是放在一行
我试验了几种布局，也不好用，有的时候表单元素根本就看不到了；
另外下面那两个按钮也可以和这5个表单元素放在一行吗？

	//aaa字段
	var customerTelField = new Ext.form.TextField({
		fieldLabel:'aaa',
		name:'customerTel',
		allowBlank:false,
        length:15
	});
	//bbb字段
	var serverTelField = new Ext.form.TextField({
		fieldLabel:'bbb',
		name:'serverTel',
		allowBlank:false,
		length:15
	});
	//ccc字段
	var centerField = new Ext.form.ComboBox({
		fieldLabel:'ccc',
		name:'center',
		allowBlank:false,
	    mode: 'local',
	    readOnly:true,
	    triggerAction:'all',
	    length:5,
		store:new Ext.data.SimpleStore({
			fields:['value','text'],
			data:[
				['all','全部'],
				['gj','tom'],
				['dt','jim],
				['gs','luly],
				['ct','lucy],
				['ykt','lulu']
			]
		}),
		valueField: 'value',
	    displayField: 'text'
	});
	//开始日期字段
	var startTimeField = new Ext.form.DateField({
		fieldLabel:'开始时间',
		name:'startTime',
		format:'Y-m-d',
		readOnly:true,
	    length:25
	});
	//结束日期字段
	var endTimeField = new Ext.form.DateField({
		fieldLabel:'结束时间',
		name:'endTime',
		format:'Y-m-d',
		readOnly:true,
	    length:25
	});
	//表单对象
    var queryForm = new Ext.FormPanel({
    	defaultType: 'textfield',
        labelAlign: 'right',
        region:'north',
        height:200,
        title: 'Query,
        autoWidth:true,
        url:'./RealTimeQueryServlet',
        items: [
	        customerTelField,
	        serverTelField,
	        centerField,
	        startTimeField,
	        endTimeField
        ],
        buttons:[{
	        text:'提交',
	        handler:function(){
	        	if(queryForm.getForm().isValid())
		        	queryForm.getForm().submit({
		        		waitMsg:'保存中,请稍后...',
		        		success:function(){
		        			queryForm.getForm().reset();
		        			store.reload();
		        		}
		        	});
	        }
	    },{
	    	text:'取消',
	    	handler:function(){
	    		queryForm.getForm().reset();
	    	}
	    }]
    });

评论

5 楼 xyz20003 2008-06-24  

tableLayout如何？
右边放一个Panel，里边用html写上你要的附加说明。

4 楼 stworthy 2008-06-24  

EXT表单的布局有些不太灵活，比如横着放，虽然用ColumnLayout能够解决，但也着实麻烦。
另外一个问题也不太好处理，就是表单输入项的说明文字，除标签和输入框外如果要在右边加上附加的说明，目前EXT就无法很好解决。

3 楼 liping 2008-06-24  

用Layout见帮助文档

2 楼 tubinee 2008-06-24  

llm6101 写道

我的表单中有5个TextField元素，
默认情况下各表单元素是竖着放着，
请问该如何设置才能把各元素横着放，就是放在一行
我试验了几种布局，也不好用，有的时候表单元素根本就看不到了；
另外下面那两个按钮也可以和这5个表单元素放在一行吗？

	//aaa字段
	var customerTelField = new Ext.form.TextField({
		fieldLabel:'aaa',
		name:'customerTel',
		allowBlank:false,
        length:15
	});
	//bbb字段
	var serverTelField = new Ext.form.TextField({
		fieldLabel:'bbb',
		name:'serverTel',
		allowBlank:false,
		length:15
	});
	//ccc字段
	var centerField = new Ext.form.ComboBox({
		fieldLabel:'ccc',
		name:'center',
		allowBlank:false,
	    mode: 'local',
	    readOnly:true,
	    triggerAction:'all',
	    length:5,
		store:new Ext.data.SimpleStore({
			fields:['value','text'],
			data:[
				['all','全部'],
				['gj','tom'],
				['dt','jim],
				['gs','luly],
				['ct','lucy],
				['ykt','lulu']
			]
		}),
		valueField: 'value',
	    displayField: 'text'
	});
	//开始日期字段
	var startTimeField = new Ext.form.DateField({
		fieldLabel:'开始时间',
		name:'startTime',
		format:'Y-m-d',
		readOnly:true,
	    length:25
	});
	//结束日期字段
	var endTimeField = new Ext.form.DateField({
		fieldLabel:'结束时间',
		name:'endTime',
		format:'Y-m-d',
		readOnly:true,
	    length:25
	});
	//表单对象
    var queryForm = new Ext.FormPanel({
    	defaultType: 'textfield',
        labelAlign: 'right',
        region:'north',
        height:200,
        title: 'Query,
        autoWidth:true,
        url:'./RealTimeQueryServlet',
        items: [
	        customerTelField,
	        serverTelField,
	        centerField,
	        startTimeField,
	        endTimeField
        ],
        buttons:[{
	        text:'提交',
	        handler:function(){
	        	if(queryForm.getForm().isValid())
		        	queryForm.getForm().submit({
		        		waitMsg:'保存中,请稍后...',
		        		success:function(){
		        			queryForm.getForm().reset();
		        			store.reload();
		        		}
		        	});
	        }
	    },{
	    	text:'取消',
	    	handler:function(){
	    		queryForm.getForm().reset();
	    	}
	    }]
    });

http://www.iteye.com/topic/203422?page=7

和你一样的问题

1 楼 xyz20003 2008-06-24  

columnLayout，examples里有例子。