Проблемы обновления с ExtJs3.4.0 до ExtJs4.1.1

Question

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 не определен.

Я отладил код и обнаружил, что в текущем объекте this отсутствует объект 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;
                }
            }
        }
    );
})();

Пожалуйста, предложите, где я иду не так?

Заранее спасибо...

Answer 1

Серьезно, используйте более ленивую инициализацию! Ваш код - это адские объекты, все неструктурированные.

Прежде всего, вы можете переопределить и использовать переопределенный метод с чем-то вроде этого (с 4.1)

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;
    }
  }
});

Но: метод initValue вызывается в initField (и это в initComponent), так что вы не можете иметь ссылку на this.me, потому что компонент фактически не (полностью) отображается.

Итак, это должно помочь (не проверено):

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;
    }
  }
});

Но я настоятельно рекомендую не использовать такие вещи в переопределениях. Создайте выделенные компоненты, которые улучшат читабельность кода.