Estendi Ext.data.Store

Question

Sto provando a centralizzare la configurazione dei negozi EXTJS all'interno della mia applicazione, tuttavia, non riesco a capire come farlo accadere. Sto usando ExtJS 4.1.

Ho un archivio di base, che voglio contenere tutte le cose di configurazione ripetitive, e quindi i miei negozi più specifici per contenere ciò che è effettivamente diverso.

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

Poi vorrei fornire la roba specifica negozio in un negozio da basi negozio -

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

Quello che sto trovando è che solo doesnt comportarsi a tutti. Credo che abbia qualcosa a che fare con il proxy, ma non riesco a rintracciarlo.

Qual è il modo corretto per farlo? Preferirei non replicare le stesse cose di configurazione (dal mio negozio astratto) attraverso gli oltre 350 negozi della mia applicazione. A partire da ora, questo è quello che ho, e ho pensato che stavo cercando di implementare un concetto piuttosto semplice .. senza risultato.

So che le cose non funzionano, basico come il pageSize, o anche l'autoLoad .. perché non vengono rispettate affatto.

Ho giocato con i costruttori e ho chiamato il genitore.

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Non si può fare in questo modo perché ci si aspetta di unire gli oggetti che semplicemente non farà.

Invece, ti consigliamo di guardare qualcosa di simile (non testata):

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

Ecco un altro modo:

negozio di Base (app/negozio/Base.js):

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

procura Base (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 
      }); 
     } 
    } 
}); 

negozio Calcestruzzo (app/negozio/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

penso che le altre risposte qui potrebbe essere un po 'più complicato di quanto hanno bisogno di essere. A partire dalla versione 4.0.0, ExtJS ha un Ext.Object.merge() method che consentirà un approccio molto vicino a quello che il richiedente stava tentando.

Utilizzando i valori che il richiedente ha, io definisco il mio negozio "astratto" come questo:

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

mi piacerebbe quindi creare i miei negozi concreti come questo:

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

Questo l'approccio funzionerà anche per più livelli di componenti.Ad esempio, è possibile modellare un archivio di sola lettura:

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