Ext.data.Storeを拡張する

Question

私は自分のアプリケーション内にEXTJSストアの設定を集中化しようとしていますが、これをどうやって行うのか分かりません。私はExtJS 4.1を使用しています。

私は基本ストアを持っています。これは繰り返し設定のすべてを保持したいのですが、実際には異なるものを保持するためのより具体的なストアです。

Ext.define('My.store.Abstract', { 
    extend: 'Ext.data.Store', 
    autoload:false, 
    proxy: { 
     type: 'ajax', 
     reader: { 
      type: 'json', 
      root: 'data', 
      totalProperty: 'total', 
      successProperty: 'success', 
      messageProperty: 'message' 
     }, 
     writer: { 
      type: 'json', 
      encode: true, 
      writeAllFields: true, 
      root: 'data', 
      allowSingle: false 
     }, 
     simpleSortMode: true 
    } 
}); 

それから私は店ベースで店舗の店舗の特定のものを提供したいと思います -

Ext.define('My.store.Products', { 
    extend: 'My.store.Abstract', 
    storeId: 'Products', 
    model: 'My.model.Product', 
    proxy: { 
     api: { 
      create: '/myurl/create', 
      read: '/myurl/index', 
      update: '/myurl/update', 
      destroy: '/myurl/delete' 
     } 
    } 
}); 

私が発見しています何がそれだけでdoesntのすべてで動作することです。私はそれがプロキシと何か関係があると信じていますが、私はそれを追跡できません。

これを行う正しい方法は何ですか？私は私の抽象ストアから同じ構成のものを私のアプリケーションの350以上の店に複製したくないです。今のところ、それは私が持っているものであり、私はかなり基本的な概念を実装しようとしていると思っていました。

pageSizeやautoLoadといった基本的なものは動作していないことが分かっています。尊重されていないからです。

私はコンストラクタを使い、親を呼び出しています。

ご協力いただければ幸いです。

Answer 1

あなたはそれができないオブジェクトをマージすることを期待しているので、そうすることはできません。

代わりに、あなたはこの（未テスト）のようなものを見てみたいと思うでしょう：

ベースストア（アプリ/店舗/ Base.js）：ここ

Ext.define('Base', { 
    extend: 'Ext.data.Store', 

    autoLoad: false, 

    constructor: function(config) { 
     // applyIf means only copy if it doesn't exist 
     Ext.applyIf(config, { 
      proxy: this.createProxy() 
     }); 
     this.callParent([config]); 
    }, 

    createProxy: function() { 
     return { 
      reader: { 
       type: 'json', 
       root: 'data', 
       totalProperty: 'total', 
       successProperty: 'success', 
       messageProperty: 'message' 
      }, 
      writer: { 
       type: 'json', 
       encode: true, 
       writeAllFields: true, 
       root: 'data', 
       allowSingle: false 
      }, 
      simpleSortMode: true 
     } 
    } 
}); 

Ext.define('Sub', { 
    extend: 'Base', 

    createProxy: function(){ 
     var proxy = this.callParent(); 
     proxy.api = { 
      create: 'create', 
      update: 'update' 
     }; 

     return proxy; 
    } 
}); 

Answer 2

は別の方法であります

Ext.define('Admin3.store.Base', { 
    extend: 'Ext.data.Store', 
    autoLoad: true, 
    autoSync: true 
}); 

ベースプロキシ（APP /プロキシ/ Base.js）：

Ext.define('Admin3.proxy.Base', { 
    extend: 'Ext.data.proxy.Ajax', 
    alias: 'proxy.base', 
    reader: { 
     type: 'json', 
     root: 'items', 
     successProperty: 'success', 
     messageProperty: 'message' 
    }, 
    listeners: { 
     exception: function(proxy, response, operation){ 
      console.log(response, operation); 
      Ext.Msg.show({ 
       title: 'Remote Exception', 
       msg: typeof operation.getError() === 'string' ? operation.getError() : operation.getError().statusText, 
       icon: Ext.Msg.ERROR, 
       buttons: Ext.Msg.OK 
      }); 
     } 
    } 
}); 

コンクリートストア（アプリ/店舗/ Users.js）：

Ext.define('Admin3.store.Users', { 
    extend: 'Admin3.store.Base', 
    model: 'Admin3.model.User', 
    proxy: Ext.create('Admin3.proxy.Base', { 
     api: { 
      read: 'data/read.php', 
      update: 'data/update.php' 
     } 
    }) 
}); 

Answer 3

は、私はここで他の回答は、彼らが必要以上に少し複雑かもしれないと思います。バージョン4.0.0以降、ExtJSにはExt.Object.merge() methodがあり、これは尋問者の試みに非常に近いアプローチを可能にします。

が

Ext.define("Ext.ux.data.Store", { 
    extend: "Ext.data.Store", 
    constructor: function(config) { 
     var defaults = { 
      autoload: false, 
      proxy: { 
       type: "ajax", 
       reader: { 
        type: "json", 
        root: "data", 
        totalProperty: "total", 
        successProperty: "success", 
        messageProperty: "message" 
       }, 
       writer: { 
        type: "json", 
        encode: true, 
        writeAllFields: true, 
        root: "data", 
        allowSingle: false 
       }, 
       simpleSortMode: true 
      } 
     }; 
     this.callParent([Ext.Object.merge({}, defaults, config)]); 
    } 
}); 

私は、このように私の具体的なストアを作成したい：：

Ext.create("Ext.ux.data.Store", { 
    storeId: "ExampleStore", 
    model: "ExampleModel", 
    autoLoad: true, // This overrides the defaults 
    proxy: { 
     api: { 
      read: "/example/read" // This overrides the defaults 
     } 
    } 
}); 

これ、私はこのような私の「抽象的」ストアを定義したいアスカーが持っている値を使用して

アプローチは、複数のレベルのコンポーネントに対しても機能します。たとえば、読み取り専用ストアをモデル化することができます。

Ext.define("Ext.ux.data.ReadonlyStore", { 
    extend: "Ext.ux.data.Store", 
    constructor: function(config) { 
     var overrides = { 
      proxy: { 
       api: { 
        create: undefined, 
        update: undefined, 
        destroy: undefined 
       } 
      } 
     } 
     this.callParent([Ext.Object.merge({}, config, overrides)]); // Note that the order of parameters changes here 
    } 
});