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 sourceprint?

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 sourceprint?

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

如果您有更好的建議也不妨留言一起交流學習。