0

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

どこが間違っているのか教えてください。

前もって感謝します...

4

1 に答える 1

0

真剣に、より怠惰な初期化を使用してください！あなたのコードは、すべて構造化されていない、地獄のオブジェクトです。

まず第一に、そのようなものでオーバーライドされたメソッドをより簡単にオーバーライドして使用することができます（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;
    }
  }
});

ただし、オーバーライド内でそのようなものを使用しないことを強くお勧めします。コードの可読性を向上させる専用コンポーネントを作成します。

于 2012-09-28T19:17:24.263 に答える