从最初的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的控件能想到的暂时就这些，以后用的更多的时候再补充。