如何定制ext的form表单的表单排版

Posted 2022-11-28 车丁丁

    最近在ext开发项目中，在表单中有几项用ext的form排版满足不了需求，比如，日期会是起止时间，两个输入框会里的很近，或者其他的想查询范围的两个输入框从-----至-----这种类型的查询条件等，用ext默认的排版总是很难看（不能看）。研究了ext的代码，发现改起来也比较麻烦，用了一种变通的方式终于将其实现。如下图：

加入不特殊处理交易次数的显示的话，显示的效果就和用户昵称和客户名称一样。

js代码：/** * 查询表单定义 */ //查询表单-"用户昵称"字段 var buyerNickNameField = new Ext.form.TextField( id:'buyerNickNameId', fieldLabel:'用户昵称', maxLength:100, width:150 ); //查询表单-"客户名称"字段 var buyerNameField = new Ext.form.TextField( id:'buyerNameQuery', fieldLabel:'客户名称', maxLength:100, width:150 ); //查询表单-"交易次数"字段 var tradeCountStartQueryField = new Ext.form.NumberField( id:'tradeCountStart', fieldLabel:'交易次数', maxLength:3, // allowBlank:false, width:60 ); var tradeCountEndQueryField = new Ext.form.NumberField( id:'tradeCountEnd', fieldLabel:'至', maxLength:3, // allowBlank:false, width:60 ); var tradeCountStartLabel = new Ext.form.Label( id:'tradeCountStartLabel', maxLength:3, <a href="https://it.cha138.com/html/" target="_blank"><strong class="keylink">html</strong></a>:' 交易次数： ' // width:60 ); var tradeCountEndLabel = new Ext.form.Label( id:'tradeCountEndLabel', maxLength:3, html:' 次  至： ' // width:60 ); var ci = new Ext.form.Label( id:'ci', maxLength:3, html:' 次' // width:60 ); var queryForm = new Ext.FormPanel( title:'查询条件', titleCollapse: true,//点击标题区域收回组件 //height:150, autoHeight:true, //width:840, autoWidth:true, collapsible:true, autoScroll:true, labelAlign:'right', buttonAlign:'right', border:false, hideBorders:true, readOnly:true, labelWidth :90, layout:'table', layoutConfig: columns: 2 , defaults: // layout: 'form', width:260 , items:[ layout: 'form', items: buyerNickNameField , layout: 'form', items: buyerNameField , colspan:2 , colspan:2, width:600, items:[tradeCountStartLabel,tradeCountStartQueryField, tradeCountEndLabel,tradeCountEndQueryField,ci] ], buttons: [ new Ext.Button( text:"信息检索", tooltip:'信息检索', iconCls : 'query', handler: function()doQuery(); ) ], keys:[ //处理键盘回车事件 key:Ext.EventObject.ENTER, fn: function()doQuery();, scope:this ] );