论坛首页 入门技术论坛

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

浏览 2656 次
该帖已经被评为新手帖
作者 正文
   发表时间:2008-06-24  
我的表单中有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();
	    	}
	    }]
    });
   发表时间:2008-06-24  
columnLayout,examples里有例子。
0 请登录后投票
   发表时间: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

和你一样的问题
0 请登录后投票
   发表时间:2008-06-24  
用Layout见帮助文档
0 请登录后投票
   发表时间:2008-06-24  
EXT表单的布局有些不太灵活,比如横着放,虽然用ColumnLayout能够解决,但也着实麻烦。
另外一个问题也不太好处理,就是表单输入项的说明文字,除标签和输入框外如果要在右边加上附加的说明,目前EXT就无法很好解决。
0 请登录后投票
   发表时间:2008-06-24  
tableLayout如何?
右边放一个Panel,里边用html写上你要的附加说明。

0 请登录后投票
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics