-----------------------------------------------------------------------------------------------------------------------
声明一下下:
由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有BUG那是必须的,这里仅起到抛砖引玉的作用
如果有什么问题,大家可以联系我 wjm_0729@yahoo.cn 或直接评论, 谢谢!!
文章中后端技术是用的 Nutz http://nutzam.com/ --- 除SSH之外的另一种选择 (打个小广告,哈哈!!)
------------------------------------------------------------------------------------------------------------------------
用过Ext的都知道,最TM麻烦的莫过于调表单项的坐标了(当然是在你的表单布局为absolute的时候,但是企业应用还就是大多数需求都得用它才行得通--只是我自己的看法,可能是我不熟悉界面美化和用户体验的原因)。有时候调一个表单项坐标时你得同时调他的label的坐标,那个汗。。。。真是痛不欲生.....
为此,我写了下面的这个东东
/** * 继承自 Container * 默认功能配置项: * * @class SteelField * @extends Container * * 部分特定配置方法如下(其他的和XXXField一样): * ------------------------------------------ * xhide: 标签是否显示(注意:如果xhide为true,则控件在表单的位置将由随后的控件所占据,其默认值将由xvalue指定) * xvalue: 控件影藏时,表单提交的值。默认为 null * fieldLabel: 标签 * labelWidth:(可选)标签的宽度,默认为文字长度+1 * 12 像素 * labelAlign:(可选)标签位置,默认靠左 * inputWidth:文本框宽度,默认 100 像素 * type: (text/number/date/date2/combo/steelcombogird)控件类型,默认为 text * ------------------------------------------ */ Ext.SteelField = Ext.extend(Ext.Container, { xhide : false, xvalue : null, isFormField : true, autoHeight : true, initComponent : function() { Ext.SteelField.superclass.initComponent.call(this); }, constructor : function(options) { Ext.apply(this, options); Ext.SteelField.superclass.addEvents.call(this); //文本框类型 xtype var typeMap = { text : 'textfield', area : 'textarea', number : 'numberfield', date : 'datefield', combo : 'combo', combogrid : 'steelcombogird', date2 : 'steel2date' }, fieldType = typeMap[this.type || 'text']; this.labelAlign = 'left'; if(fieldType=='textarea'){ this.height = options.height ? options.height : 22; options.height = this.height; } if(this.xhide){ this.field = new Ext.form.Hidden(Ext.applyIf({ value: this.xvalue || null }, options)); this.hidden = true; this.width = 0; this.height = 0; }else{ this.layout = 'form'; this.defaults = { labelSeparator : Steel.LABELSEPARATOR, labelStyle : Steel.LABELSTYLE }; this.margins = Steel.LABELMARGINS; //标签宽度 if (this.fieldLabel) { //计算fieldLabel里面包含的西文字符数 var ec = 0; for(var i = 0, l = this.fieldLabel.length; i < l; ++i){ if(/[a-zA-Z0-9]/.test(this.fieldLabel.substring(i,i+1))){ ec++; } } this.labelWidth = this.labelWidth || eval('Math.ceil((this.fieldLabel.length + 1) * ' + Steel.LABLEFACTOR + ')') - ec*5; this.width = this.labelWidth + (this.inputWidth || Steel.DEFAULTFIELDWIDTH); }else{ this.labelWidth = 0; this.width = this.inputWidth || Steel.DEFAULTFIELDWIDTH; } this.field = Ext.create(Ext.applyIf({ xtype : fieldType, width : this.inputWidth || Steel.DEFAULTFIELDWIDTH }, options)); } this.items = [this.field]; //灰掉只读项 if(this.readOnly) this.setDisabled(true); //获得相应控件的属性方法 Field 和 XXXField 的特有属性 Ext.applyIf(this,this.field.prototype); Ext.SteelField.superclass.constructor.call(this); }, getText : function() { return this.field.fieldLabel; }, setText : function(t){ this.fieldLabel = t; this.doLayout(); } }); Ext.reg('steelfield', Ext.SteelField);
代码当中有几个控件也是自定义的,如 'steelcombogird' 'steel2date' 还有'steelcombotree'等几个自定义控件没有加上去,当然这个列表会越来越长的.....
你可以这样使用她
{ name:'222' ,xtype:'steelfield' ,type:'date' //你的实际控件的xtype ,fieldLabel:'哈哈哈哈哈哈哈哈aaaaaaAAAAA' //标签文字 //,labelWidth: 65 //【可选】这是标签的宽度,控件默认会给你算好的, ,inputWidth: 170 //文本域的宽度 },
效果如下图所示:
这里推荐你使用hbox布局,因为他书写简单,当然你可以选择使用其他的布局,只要你喜欢
在我写完这个控件时,我才发现其实Ext的ux控件库里面有相关的插件 FieldLabeler.js 但他是以插件的形式工作的
我觉得还不如我这个东西好用,至少我的代码量比她小(开发时的代码量)