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