从最初的textfield控件学起

学完上一阶段的Extjs4之后,因为boss多年以前的项目有了新需求,于是开始在很多大牛们做出的项目上进行新的关于Extjs的工作,一开始看到那帮牛的让人不能仰视的人写出来的东西特别不习惯,而且是用vs2008,Extjs2.0编写的,本人把某些理念上的差别当做是代沟导致的。

当然在最亲近的小大牛的威逼利诱下,“你得试着去习惯这种写代码的方式”,还是一行一行看起了写的不像Extjs的Extjs,看完之后才发现其实也没什么,对控件的使用变得很规范,而且将不同类型不同功能的代码放到特定的.js文件里边,可读性,和与页面对应的特点都显示的特别明朗,包括抽象出来的一些方法等。当然也包括各种类型的控件定义的方式,比如Dsbm.collegeAction.GetList=function(){}这样去定义js内部需要引用的的其他方法等。

进行具体的学习,在做东西的过程中,发现其实东西就那么多,只有活用起来才能创造出更多更好更适合的东西,而且做的时候不能简单的copy,知道了意思,用起来就事半功倍了。

于是就先从textField控件学起吧。

定义:

this._textFieldProjectName = new Ext.form.TextField({

fieldLabel: '项目名称',//定义框的名称,

readOnly: isShow,//文本框是否可编辑,只用于显示还是可以编辑

value: project.get('projectName'),//显示的值,也可以在其他地方对这个此赋值,如panel._textFieldProjectName.setValue("project.get('projectName')"
);如果要获得当前的值就需要getValue()或getRawValue();
allowBlank: false,//允许为空,本人在用的时候,入如果不添加用于验证的条件,就算为空也可以进行下一步操作,如果必须要满足验证才通过,就要加valid事件; disabled:isShow,//true时,文本框不能编辑且会变灰,在其他地方可以.setDisabled(isShow); width: 200,//整个框和标签的长度,另外有labelWidth:可以定义名称的宽度。 autoCreate: { tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '8' },//表示当前文本框只能输入8个字符,超出之后自动
取消输入;
hideLabel:false,//默认是false,如果设为true的话,可以一个做成标签后边跟着一堆框的效果 hidden:false//默认,如果需要隐藏的话只要hidden为true,或在其他地方setVisible(false)或者.hide()就可以啦 });

验证:

1、对整个panel的验证

 this.isValid = function (preventMark) {

var result = true;

result = this._textFieldProjectName.isValid(preventMark) && result;//只有当输入的值满足条件时,才可以进行限制下的其他操作

return result;

}

2、对当前textfield的验证

 this.validatCardNumber = function () {
var panel = this.panel;
var value = this.getValue();//如果要原样获得文本框的内容,需要用getRawValue();
if (value == "") {
return true;
}
var lCardNumber = value.length;
if (!isNaN(value))//判断输入的字符是否全部为数字
if (lCardNumber == 12 || lCardNumber == 15) {

return true;
}
else {
this.invalidText = '请正确输入12或15位的注册号!';//输入不正确显示的文字
return false;//只要函数return false 就表示验证没通过,就不能进行下一步操作
}
}

我最喜欢的是这种验证事件,只要在文本框内输入一点内容,就会触发该验证事件,得到自己想要的结果。

this._textFieldProjectName.panel = this;//定义当前的panel
this._textFieldProjectName.validator = this.validatCardNumber;//定义当前文本框的validator函数,函数名为validatCardNumber;
这两行的定义必须放在textfield的定义下面。

3、textfield的演变

与textfield相同,还有NumberField,TextArea等,只不过Numberfield只能输入数字,而且当前几位是0的时候可以输入,但是鼠标离开之后默认不显示。TextArea可以输入多行内容,默认超出范围之后显示竖的滚动条。

还可以自己对此种类型的控件进行扩展,如moneyField,引用的时候只需要同一般的numberField一样就可以了在一般的getValue()的同时只要getMoney()就可以获得将所填的值扩大100 0000倍的效果。同理也可以扩展成其他适合自己的小控件,这样看起来,用Extjs做东西,除了不需要美工就可以做出让人看起来舒服的界面意外,其控件的使用也是灵活方便的。

Vpms.component.MoneyField = function(params){//根据Ext.form.NumberField的定义形式,这里也用点点的方式表示用起来比较规范
params.value = Money.render(params.value, false);
params.allowNegative = false;
params.decimalPrecision = 6;//表示精度为6位,Extjs的NumberField控件的精度默认为2位,如果需要设置的话,可以allowDecimal:true,decimalPrecision:6
params.maxValue = 99999;

Vpms.component.MoneyField.superclass.constructor.call(this, params);
}
Ext.extend(Vpms.component.MoneyField, Ext.form.NumberField, {
getMoney: function(){
var value = this.getRawValue();
if (value == '' || value == undefined)
return '';

return parseFloat(value).mul(100).mul(10000);
}
});

textField的控件能想到的暂时就这些,以后用的更多的时候再补充。

你可能感兴趣的:(textfield)