Przedłużanie Ext.data.Store

Question

Próbuję scentralizować moją konfigurację sklepów EXTJS w mojej aplikacji, jednak nie mogę wymyślić, jak to się stało. Używam ExtJS 4.1.

Mam sklep bazowy, który chcę przechowywać wszystkie powtarzające się elementy konfiguracji, a następnie moje bardziej szczegółowe sklepy, aby pomieścić to, co jest faktycznie inne.

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

Następnie chciałbym podać konkretne rzeczy magazynu w sklepie o zasadach sklepu -

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

Co ja znalezieniem jest to, że po prostu robi się zachowywać w ogóle. Wierzę, że ma to coś wspólnego z proxy, ale po prostu nie mogę go wyśledzić.

Jaki jest prawidłowy sposób to zrobić? Wolałbym nie replikować tych samych rzeczy konfiguracyjnych (z mojego abstrakcyjnego sklepu) w ponad 350 sklepach w mojej aplikacji. Odtąd to jest to, co mam, i myślałem, że próbuję wdrożyć całkiem podstawową koncepcję ... bez skutku.

Wiem, że rzeczy nie działają, tak podstawowe jak rozmiar strony, a nawet autoLoad ... ponieważ nie są w ogóle respektowane.

Grałem z konstruktorami i dzwoniłem do rodzica.

Każda pomoc zostanie bardzo doceniona.

Answer 1

Nie możesz tego zrobić w ten sposób, ponieważ spodziewasz się scalić obiekty, których po prostu nie zrobisz.

Zamiast tego, warto spojrzeć na coś takiego (niesprawdzone):

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

Oto kolejny sposób:

sklep bazowa (app/sklep/Base.js):

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

bazowa proxy (app/proxy/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 
      }); 
     } 
    } 
}); 

sklep Beton (app/sklep/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

myślę pozostałe odpowiedzi tutaj może być nieco bardziej skomplikowana niż oni muszą być. Począwszy od wersji 4.0.0, ExtJS ma numer Ext.Object.merge() method, który pozwala podejść bardzo zbliżonych do tego, co próbował pytający.

Wykorzystując wartości że pytający ma, będę określić mój „biznes” sklep takiego:

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

bym wtedy tworzę konkretnych sklepów tak:

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

ten podejście będzie również działać dla wielu poziomów komponentów.Można na przykład modelować sklep tylko do odczytu:

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