Ext.Net/ExtJs：关于TextField控件内size、maxLength控制文本框输入字符长度属性失效问题分析以及解决方案

今天发现这样一个关于Ext.Net内TextField文本框设置属性MaxLength、Size、MaxLengthText均失效问题，设置了此属性，依然可以无限制地输入文本信息。无奈之余，网上搜索了一番，发现在ExtJs版本内也会存在这个问题。

先给我自己的解决办法（这是一个可编辑grid，obj为遍历的出的列对象）

if(obj.edittype == "text"){
    var vali2 = false;
   
    var maxlength2 =2000; //默认最大字数限制2000
    var maxlength3 = 0;
    if(""!=obj.maxLength&&undefined!=obj.maxLength){
    maxlength2 = parseInt(obj.maxLength)
    }
    column.editor = {
                 xtype: 'textfield',
                 maxLength:maxlength2,
                 //maxlengthText:'字数不大于'+maxlength,
                 listeners : { 
                 /*'afterrender':function(field1,eOpts){
                 if (!isNaN(field1.maxLength) && (field1.maxLength * 1) > 0 && (field1.maxLength != Number.MAX_VALUE)) {


                 field1.el.dom.maxLength = 10;


                 }
                 }*/
                     'change' : function(field,newValue,oldValue){
                     //事件发生时无法获取变量maxlength2的值，所以添加了 maxLength属性
                     if(field.maxLength>0&&newValue.length>field.maxLength){
                    var value1 = newValue.substring(0,field.maxLength);
                    field.setValue(value1);
                    maxlength3 = field.maxLength;
                    vali2=true;
                     }
                     }
                 },
    validator:function (value){
    if(vali2){
    vali2 =false;
    return "字数不大于"+ maxlength3;
    }
    return true ;
    }
   
               }
   
    }

一、ExtJs内TextField设置maxLength失效问题解决办法

在ext-all.js文件引入之后加入这样一段JS代码即可：

view source print ?

1. Ext.form.TextField.prototype.size = 20;

2. Ext.form.TextField.prototype.initValue = function() {

3. if (!isNaN(this.maxLength) && (this.maxLength * 1) > 0 && (this.maxLength != Number.MAX_VALUE)) {

4. this.el.dom.maxLength = this.maxLength * 1;

5. }

6. };

这样做的目的是通过所设置的maxLength属性通过动态的方式加入到该TextField对象的dom内去，让其真正地生效。

二、Ext.Net内TextField设置maxLength失效问题解决办法

这个不能与ExtJs一样使用，因为在Ext.Net内你将会找不到this.el对象，更不能设置maxLength属性了的。我们需要通过其他途径解决这个问题。

通过查找资料得知，我们除了要设置MaxLength属性以外，特别需要设置属性EnforceMaxLength 为true。这样MaxLength才会生效。

view source print ?

1. <ext:TextField ID="startSessionTextField" runat="server" FieldLabel="Account" AllowBlank="false" EnableKeyEvents="true" BlankText="The account is required." Text="XXX" EnforceMaxLength="true"  MaxLength="10" AnchorHorizontal="95%" IndicatorIcon="Accept" Regex="^[a-zA-Z0-9]{5,10}$" RegexText="Invalid" />

EnforceMaxLength：表示是否在Field的底层设置MaxLength属性值，默认为false。且只有在ExtJs4.0版本中才提供这个属性。

这样一来就很好使用了的。

扩展阅读：

1、http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.Text-cfg-enforceMaxLength

2、http://forums.ext.net/showthread.php?19472-TextField-MaxLength-not-working

如果您有更好的建议也不妨留言一起交流学习。