28 votes

Modèle dynamique avec ExtJS 4

Avec ExtJS 3.x, j'ai été en mesure d'utiliser les "champs" de la propriété d'un Magasin, mais il semble avec ExtJS 4 je dois absolument utiliser un Modèle. C'est bien beau, 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.

J'ai pu re-créer un Modèle, mais j'ai besoin d'utiliser un autre nom, comme c'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!

20voto

Geronimo Points 6482

4.1 mise à JOUR:

Comme une mise à jour... en 4.1, il existe désormais une méthode statique setFields qui peut être utilisé pour définir le modèle prototype de champs. Il fonctionne bien dans un contrôleur de la méthode init.

Quand j'ai fait cela, je voulais avoir quelques champs statiques définies dans le modèle de la classe et ensuite de fixer des plus dynamique. Malheureusement, le nouveau setFields méthode remplace tous les domaines avec l'argument, c'était assez facile à gérer si.

Cet exemple utilise le modèle MVC où mon modèle et le magasin sont inclus dans le contrôleur model tableau et store tableau (me donnant la pratique des getters 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();

        });

    }

});

L' User modèle et CurrentUser magasin sont créés exactement comme des non-dynamique des modèles et des magasins et inclus dans leur contrôleur de tableaux, l '"Utilisateur" modèle est tout simplement absent de la dynamique des champs qui sont ajoutés comme indiqué ci-dessus.

17voto

frow Points 529

Je suis aussi allé sur ce problème. J'ai un service qui est responsable de l'extraction des métadonnées à partir du serveur et d'adapter les modèles et les magasins de ces métadonnées.

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

Lorsque les méta-données sont traitées, j'ai ajouter de nouveaux champs pour le prototype du modèle comme celui-ci (metaDataStore est le magasin contenant les méta-données, le modèle est le modèle de ce qui peut être obtenu à partir du modèle manager):

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

Quand je téléphone alors à la charge sur un magasin à l'aide de ce modèle ou de créer de nouvelles instances de modèle les nouveaux champs sont traités correctement.

3voto

Pascal Jungblut Points 935

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

// 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 un modèle de propriété -, il semble qu'il l'emporterait sur les champs de la propriété.

Je voulais aussi changer le nombre de colonnes et le contenu d'une grille de façon dynamique:

// 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 l'Ext JS 4 documentation sur les "champs" de la propriété de la Poste.les données.Magasin:

Ceci peut être utilisé à la place de spécification d'un modèle de configuration. L' des champs doit être un ensemble de Ext.les données.Configuration du champ des objets. Le magasin va automatiquement créer un Ext.les données.Modèle avec ces champs. Dans général cette option de configuration devrait être évitée, il existe pour l' à des fins de compatibilité descendante. Pour quelque chose de plus compliqué, comme le en spécifiant un id particulier de la propriété ou assocations, Ext.les données.Modèle être définies et spécifiées pour le modèle config.

Donc soyez prudent - Sencha pouvez le supprimer à l'avenir.

1voto

Jordy Meow Points 599

D'accord, en fait, nous pouvons utiliser la propriété "fields" depuis la version bêta et la nouvelle version, donc tout va bien;)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X