ExtJSコンポーネントでカスタム属性を使用する

Question

私のアプリケーションは昨年ほど成長しています。そして、ついには既存のコンポーネントを拡張して共通のコンポーネントを分割し始めました。私はこれが本当に有益であることを発見しました。開発とメンテナンスのスピードが増しました。私の問題は、自分のコンポーネントでカスタムパラメータを使うという概念を理解しておらず、次の例で誰かが助けてくれることを期待していたことです。具体的に私はinitComponent機能で宣言されたプロキシ内のカスタムパラメータ（myCustomParam）にアクセスすることはできていないようです：

MyEmployeeGrid = Ext.extend(Ext.grid.GridPanel, { 
myCustomParam: "CompanyX", 
initComponent:function() { 
    //Store Reader 
    var myReader = new Ext.data.JsonReader({ 
     root : 'objectsToConvertToRecords', 
     idProperty: 'id', 
     fields : [ 
      {name: 'id'}, 
      {name: 'employee', allowBlank:false}, 
      {name: 'department', allowBlank:false} 
     ] 
    }); 

    //Store Proxy 
    var dwrProxy = new Ext.ux.data.DwrProxy({ 
      apiActionToHandlerMap : { 
      read : { 
       dwrFunction : EmployeeService.readCompanyEmployees, 
       getDwrArgsFunction: function(request, recordDataArray, oldRecordDataArray) { 
        return [myCustomParam]; 
       } 
      } 
     } 
    }); 

    //Setup Params for the grid 
    Ext.apply(this, { 
     store: new Ext.data.Store({ 
      proxy: dwrProxy, 
      reader: myReader, 
      autoLoad : true, 
      autoSave: true 
     }), 
     columns: [{header: "Employee", dataIndex: 'employee'}, 
        {header: "Department", dataIndex: 'department'}] 
    }); 

    MyEmployeeGrid.superclass.initComponent.apply(this, arguments); 
} // eo function initComponent 

,onRender:function() { 
    MyEmployeeGrid.superclass.onRender.apply(this, arguments); 
} // eo function onRender 

}); 

Ext.reg('myemployeegrid', MyEmployeeGrid); 

Answer 1

私はこれがどのgetDwrArgsFunctionでポイントを中心に範囲で行うことです強い気持ちを持っていますが呼び出されます。これはおそらくmyCustomParamが何であるかわからないでしょう（これはthis.myCustomParamでなければならないが、configを適用した後にこれを設定したいと思うにもかかわらず）。これはDwrProxyオブジェクトでは宣言されておらず、所有するMyEmployeeGridオブジェクトに戻します。

私は次のように修正するために/試みをデバッグしたい：this.myCustomParamとテスト

設定範囲と試験

に

1. 名前の変更myCustomParamを createDelegate （HTTPを使用してgetDwrArgsFunctionを作成します。 ：//dev.sencha.com/deploy/dev/docs/source/Function.html#method-Ext.util.Functions-createDelegate） およびテスト

免責事項：あなたのDwrProxyなど（コードは表示されません）によってはそれらのうちのいくつかはうまくいかないでしょう

Answer 2

プロキシはプロキシのスコープに定義されていないため、変数にアクセスできません。私はこれまでのようなことに苦しんでいましたが、コンポーネントがクロージャのように振る舞い、変数を追跡すると思っていましたが、それらはありません。

グリッドのスコープをハンドラ関数に明示的に渡すことで問題を解決することができます。それをデリゲートにすることで、変更する必要があるのは、インスタンス変数にアクセスする変数を作成するだけですローカル変数。

変更：

MyEmployeeGrid = Ext.extend(Ext.grid.GridPanel, { 
    myCustomParam: "defaultValue", 
    initComponent:function() { 
    ... 
    //Store Proxy 
    var dwrProxy = new Ext.ux.data.DwrProxy({ 
      apiActionToHandlerMap : { 
      read : { 
       dwrFunction : EmployeeService.readCompanyEmployees, 
       getDwrArgsFunction: function(request, recordDataArray, oldRecordDataArray) { 
        return [this.myCustomParam]; 
       }.createDelegate(this) 
      } 
     } 
    }); 

var myGridInstance = new MyEmployeeGrid({ myCustomParam: 'ValueForThisInstance' }); 

希望これはあなたを助け、幸運

Answer 3

myCustomParamは、問題のオブジェクトのプロパティです。それ自体は変数として宣言されることはありません。これはコードをjslintで実行すると表示されます。

あなたはthis.myCustomParamが必要です。あなたはパラメータを渡すしようとしている場合

、しかし、あなたの代わりにこの方法を試してみたいことがあります

MyGrid = Ext.extend(Ext.grid.GridPanel, { 
    constructor: function(cfg) { 
    cfg = cfg || {}; 

    // ... do stuff ... 

    MyGrid.superclass.constructor.call(this, cfg); 
    } 
});