自己来封装Ext组件4--SteelField

-----------------------------------------------------------------------------------------------------------------------

声明一下下：

由于这些东西是我刚写好就贴上来的，没怎么详细的测试过，有BUG那是必须的，这里仅起到抛砖引玉的作用

如果有什么问题，大家可以联系我 [e-mail]  或直接评论， 谢谢！！

文章中后端技术是用的  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  但他是以插件的形式工作的

我觉得还不如我这个东西好用，至少我的代码量比她小（开发时的代码量）