Modèle dynamique avec ExtJS 4

Avec ExtJS 3.x, j'ai pu utiliser la propriété "fields" d'un magasin, mais il semble avec ExtJS 4 que je dois absolument utiliser un modèle. C'est bien, mais dans mon cas, ce N'est pas un modèle statique, et j'ai besoin de définir les champs à la volée et parfois de les changer.

Je pourrais recréer un modèle, mais j'ai besoin d'utiliser un nom différent car il n'est apparemment pas possible de modifier un modèle existant, ni de le supprimer. Si j'essaie D'utiliser Ext.regModel avec le même nom, ExtJS se bloque.

Merci pour votre aide!

28
demandé sur Tommi 2011-04-22 04:49:16

3 réponses

4.1 Mise à jour:

Comme une mise à jour... en 4.1, il existe maintenant une méthode statique setFields qui peut être utilisée pour définir les champs du prototype du modèle. Cela fonctionne bien dans la méthode d'initialisation d'un contrôleur.

Quand j'ai fait cela, je voulais avoir des champs statiques définis dans la classe model, puis définir un peu plus dynamiquement. Malheureusement, la nouvelle méthode setFields remplace tous les champs par l'argument, c'était assez facile à gérer.

Cet exemple utilise le modèle MVC où mon modèle et mon magasin sont inclus dans le tableau model du contrôleur et le tableau store (en me fournissant les getters pratiques utilisés ci-dessous):

Ext.define('ST.controller.Main', {
    extend: 'Ext.app.Controller',

    models: ['User', 'Reference'],

    stores: ['CurrentUser', 'PermissionRef'],

    views: ['MainPanel'],

    init: function() {
        var me = this;

        me.getPermissionRefStore().on('load', function(store, records) {
            var model = me.getUserModel();
                // this returns the static fields already defined 
                // in my User model class
                fields = model.prototype.fields.getRange();

            // add the permission options (dynamic fields) to the static fields
            Ext.each(records, function(permission) {
                fields.push({name: permission.get('name'), type: 'bool'});
            });

            // 4.1 method to update the User model fields
            model.setFields(fields);

            // now load the current user (it will use the updated model)
            me.getCurrentUserStore().load();

        });

    }

});

Le modèle User et le magasin CurrentUser sont créés exactement comme les modèles et les magasins non dynamiques réguliers et inclus dans leurs tableaux de contrôleurs respectifs, le modèle' User ' manque simplement les champs dynamiques qui sont ajoutés comme indiqué ci-dessus.

20
répondu Geronimo 2012-06-12 16:00:53

Je suis aussi entré dans ce problème. J'ai un service qui est responsable de la récupération des métadonnées du serveur et de l'adaptation des modèles et des magasins à ces métadonnées.

J'ai donc défini un modèle vide et configuré le magasin pour utiliser ce modèle.

Lorsque les méta-données sont traitées, j'Ajoute les nouveaux champs/supplémentaires au prototype du modèle comme ceci (metaDataStore est le magasin contenant les méta-données, model est le modèle qui peut être obtenu à partir du modèle gestionnaire):

var fields = [];
metaDataStore.each(function(item) {
    fields.push(Ext.create('Ext.data.Field', {
        name: item.get('field')
    }));
});
model.prototype.fields.removeAll();
model.prototype.fields.addAll(fields);

Lorsque j'appelle load sur un magasin en utilisant ce modèle ou que je crée de nouvelles instances de modèle, les nouveaux champs sont traités correctement.

17
répondu frow 2011-08-24 15:52:27

Voici un exemple très simple. Il suffit d'utiliser un normal Ext.données.Stocker mais au lieu d'un modèle, spécifiez la propriété fields:

// you can specify a simple string ('totally')
// or an object with an Ext.data.Field ('dynamic')
var fields = ['totally', {name : 'dynamic', type : 'string'}];
var newStore = new MyApp.store.Object({
  fields : fields
  // other options like proxy, autoLoad...
});

Ne spécifiez pas de propriété de modèle - il semble qu'elle remplacerait la propriété fields.

Je voulais aussi changer dynamiquement les colonnes et le contenu d'une grille existante:

// reconfigure the grid to use the new store and other columns
var newColumns = [
  {header: 'Totally', dataIndex: 'totally'},
  {header: 'Dynamic', dataIndex: 'dynamic'}
];
myGrid.reconfigure(newStore, newColumns);

De la documentation Ext JS 4 sur la propriété" fields " de Ext.données.Magasin :

Ceci peut être utilisé à la place de spécification d'un modèle configuration. Le les champs doivent être un ensemble de Ext.données.Objets de configuration de champ. Le magasin créera automatiquement un Ext.données.Modèle avec ces champs. Dans général cette option de configuration devrait être évité, il existe pour le à des fins de rétrocompatibilité. Pour quelque chose de plus compliqué, comme spécifier une propriété id particulière ou assocations, Ext.données.Modèle être défini et spécifié pour le modèle config.

Alors soyez prudent-Sencha may supprimer dans l'avenir.

3
répondu 2011-06-26 22:14:56