擴展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' 
     } 
    } 
}); 

我所發現的是，它只是不表現在所有。我相信這與代理有關，但我無法追查。

這樣做的正確方法是什麼？我不希望在應用程序中的350多家商店中複製相同的配置（從我的抽象商店）。到目前爲止，這是我所擁有的，我以爲我試圖實現一個非常基本的概念......無濟於事。

我知道事情沒有起作用，像pageSize甚至autoLoad一樣基本，因爲它們根本沒有被尊重。

我玩過構造函數，並調用父類。

任何幫助將不勝感激。

Answer 1

你不能這樣做，因爲你期望合併它不會做的對象。

相反，你會想看看像這樣（未經）：

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

這裏是另一種方式：

基地商店（應用程式/存儲/ Base.js）：

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