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未定义'。

我调试代码并发现，在当前对象中，没有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;
    }
  }
});

但我强烈建议不要在覆盖范围内使用这样的内容。制作可提高代码可读性的专用组件。

ExtJs3.4.0到ExtJs4.1.1升级问题

1 个答案: