ExtJs3.4.0到ExtJs4.1.1的升级问题

ExtJS4：我在将我的应用程序ExtJs版本从3.4.0升级到4.1.1a时遇到问题

我的3.4.0版本代码：

    this.jsonStore = new Ext.data.JsonStore({
       proxy    : new Ext.data.HttpProxy({
        url: 'rs/environments',
        disableCaching: true
        }),
    restful : true,
    storeId : 'Environments',
    idProperty: 'env',
    fields  : [
         'ConnectionName', 'Type'
    ]
});

this.colmodel = new Ext.grid.ColumnModel({
    defaults: {
        align: 'center'
    },
    columns: [{
                    header: Accero.Locale.text.adminlogin.connectionsHeading,
                    width   : 140,
                    dataIndex: 'ConnectionName'
            },
            {
                    header: Accero.Locale.text.adminlogin.connectionTypeHeader,
                    width   : 120,
                    dataIndex: 'Type'
            }]
});

config = Ext.apply({
    enableHdMenu: false,
    border      : true,
    stripeRows  : true,
    store       : this.jsonStore,
    view        : new Ext.grid.GridView(),
    header      : false,
    colModel    : this.colmodel,
    sm          : new Ext.grid.RowSelectionModel({singleSelect: true}),
    loadMask: {
            msg: Accero.Locale.text.adminlogin.loadingmask
            }
}, config);

为了使应用程序与ExtJs4.1.1一起工作，我做了以下更改：

var sm = new Ext.selection.CheckboxModel( { 
        listeners:{ 
            selectionchange: function(selectionModel, selected, options){ 
                // Must refresh the view after every selection 
                myGrid.getView().refresh(); 
                // other code for this listener 
            } 
        } 
    }); 

    var getSelectedSumFn = function(column){ 
        return function(){ 
            var records = myGrid.getSelectionModel().getSelection(), 
            result  = 0; 
            Ext.each(records, function(record){ 
                result += record.get(column) * 1; 
            }); 
            return result; 
        }; 
    } 


    var config = Ext.create('Ext.grid.Panel', { 
        autoScroll:true, 
        features: [{ 
            ftype: 'summary' 
        }], 
        store: this.jsonStore, 
        defaults: {               // defaults are applied to items, not the container 
            sortable:true 
        }, 
        selModel: sm, 
        columns: [ 
            {header: Accero.Locale.text.adminlogin.connectionsHeading, width: 140, dataIndex: 'ConnectionName'}, 
            {header: Accero.Locale.text.adminlogin.connectionTypeHeader, width: 120, dataIndex: 'Type'} 
        ], 
        loadMask: {
            msg: Accero.Locale.text.adminlogin.loadingmask
            },
        viewConfig: { 
            stripeRows: true 
        } 
    }, config);

通过这些更改，我在本地文件“ext override.js”中得到一个错误，即“this.el未定义”

我调试了代码，发现当前对象中没有el对象

ext-override.js代码：

(function() {
    var originalInitValue = Ext.form.TextField.prototype.initValue;
    Ext.override(Ext.form.TextField, { 
            initValue: function() {
                originalInitValue.apply( this, arguments );
                if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
                    this.el.dom.maxLength = this.maxLength *1;
                }
            }
        }
    );
})();

请告诉我哪里出了问题

---

提前感谢…

说真的，请使用更懒惰的初始化！你的代码是一堆对象，都是非结构化的

首先，您可以通过类似的方式更轻松地重写和使用重写的方法（从4.1开始）

但是：方法initValue在initField中调用（在initComponent中调用），因此您无法引用this.me，因为该组件实际上没有（完全）呈现

因此，这应该有帮助（未经测试）：

但是我强烈建议不要在覆盖中使用这样的东西。制作专用组件，以提高代码可读性

Ext.override('My.Override.for.TextField', {
  override : 'Ext.form.TextField',
  initValue: function() {
    this.callOverridden(arguments);
    if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
      this.el.dom.maxLength = this.maxLength *1;
    }
  }
});

Ext.override('My.Override.for.TextField', {
  override : 'Ext.form.TextField',
  afterRender: function() {
    this.callOverridden(arguments);
    if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
      this.el.dom.maxLength = this.maxLength *1;
    }
  }
});