ExtJs Comment lier la grille d'enregistrement dans le ViewModel champs?

J'ai un panneau de Formulaire avec un champ de texte et une grille. Maintenant, je veux prendre userinput et d'obtenir la valeur Par le biais du ViewModel json de l'envoyer au serveur.

Problème ici est, je suis en mesure de lier textfield, alors je suis textfield valeur comme paramètre dans le modèle de vue, mais comment puis-je obtenir sélectionnés ligne de la grille de données en tant que second paramètre dans viewMolde.getData().

Par Exemple:

Modèle:

 Ext.define('UserModel', {
     extend: 'Ext.data.Model',
     fields: [{
         name: "name",
         type: "string"
     }, {
         name: "gridRecord",
         type: "auto"
     }]
 });

Modèle De Vue :

Ext.define('QAVM', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.QAVM',
    model: 'UserModel'
});

Vue :

 Ext.define('View', {
     extend: 'Ext.form.Panel',
     xtype: 'app-test',
     viewModel: 'QAVM',
     items: [{
         xtype: 'textfield',
         fieldLabel: 'TestInt',
         bind: '{name}' /**ABLE TO BIND and GETTING VALUE In viewModel.getData()*/
     }, {
         xtype: 'grid',
         title: 'Simpsons',
         formBind: true,
         store: 'storeName',
         bind: {
             selection: 'gridSelectedRecord'
         }, //HOW TO BIND GRID SELECTED RECORD TO MODEL'S SECOND FIELD "gridRecord"
         columns: [{
             text: 'Address-1',
             dataIndex: 'addr'
         }, {
             text: 'Pincode',
             dataIndex: 'pincode',
             flex: 1
         }]
     }]
 });

Il est étonnant que vous obtenez le name field de cette façon. Un viewmodel ne dispose pas d'un model property (pour une raison quelconque) et vous devez le supprimer. D'étudier les différentes options de configuration: docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/...

OriginalL'auteur Nish | 2015-08-27

Tout d'abord, je tiens à dire que l'omi votre approche est erronée. Vous ne voulez pas envoyer vos données sur le serveur par l'obtention de vos données à partir de votre viewmodel. Vous souhaitez envoyer votre dossier sur le serveur par l'intermédiaire d'un proxy sur votre model ou store. Les données de votre viewmodel devrait seulement être utilisé pour lier votre view. Le store et la models sont les données de votre serveur. Mais un store peut être lier (et filtré) par l'intermédiaire d'un viewmodel à votre view.

Model-View-ViewModel est un modèle où l' model est pour vos données (et de la migration par le biais de proxy), le view pour représenter vos données et la viewmodel à coller votre model et votre view ensemble.

Maintenant ma réponse.

Vous pouvez le faire en utilisant formulas sur votre viewmodel. Vous pouvez ensuite lier profonde de la sélection courante de la grille à votre formulaire.

ViewModel:

Ext.define('MyApp.view.group.GroupsModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.group-groups',

    stores: {
        allgroups: {
            source: 'Groups',
            sorters: {
                property: 'name',
                direction: 'ASC'
            }
        }
    },
    data: {
        title: 'Groups'
    },
    formulas: {
        currentRecord: {
            //We need to bind deep to be notified on each model change
            bind: {
                bindTo: '{groupGrid.selection}', //--> reference configurated on the grid view (reference: groupGrid)
                deep: true
            },
            get: function(record) {
                return record;
            },
            set: function(record) {
                if (!record.isModel) {
                    record = this.get('records').getById(record);
                }
                this.set('currentRecord', record);
            }
        }
    }
});

Vue:

Ext.define('MyApp.view.group.Groups', {
    extend: 'Ext.container.Container',
    xtype: 'groups',

    requires: [
        'MyApp.view.group.GroupsController',
        'MyApp.view.group.GroupsModel',
        'Ext.grid.column.Boolean',
        'Ext.form.field.Checkbox',
        'Ext.form.field.TextArea',
        'Ext.form.field.Text'
    ],

    controller: "group-groups",
    viewModel: {
        type: "group-groups"
    },

    layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch'
    },
    style: {
        backgroundColor: '#f5f5f5'
    },

    items: [{
        xtype: 'grid',
        reference: 'groupGrid', //--> used in the viewmodel
        flex: 1,
        bind: {
            title: '{title}',
            store: '{allgroups}'
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Description',
            dataIndex: 'description',
            flex: 1
        }, {
            xtype: 'booleancolumn',
            text: 'Active',
            trueText: 'Yes',
            falseText: 'No',
            dataIndex: 'isActive'
        }]
    }, {
        xtype: 'form',
        title: 'Details',
        bodyPadding: 15,
        minWidth: 300,
        split: true,
        defaults: {
            xtype: 'textfield',
            anchor: '100%',
            allowBlank: false,
            enforceMaxLength: true
        },
        items: [{
            fieldLabel: 'Name',
            bind: '{currentRecord.name}' //--> get current selected record from viewmodel
        }, {
            xtype: 'textarea',
            fieldLabel: 'Description',
            bind: '{currentRecord.description}',
            height: 120
        }, {
            xtype: 'checkboxfield',
            fieldLabel: 'Active',
            bind: '{currentRecord.isActive}'
        }]
    }]
});

Après l'édition de la model ou l'ajout de modèles à votre store sauvegarder/synchroniser votre store ou enregistrer votre model.

Merci beaucoup Tarabass pour expliquer en détail.Vous par exemple est assez clair... Mais l'exigence est quelque chose de différent. Je veux choisir les données sur le formulaire bouton soumettre quelque chose comme ça... { id:1009 , le nom de : "Nishant ", contact:[{ téléphone:91XX , e-mail:"[email protected]"}, { téléphone:91XX , e-mail:"[email protected]"},{ téléphone:88XX , e-mail:"[email protected]"}] }
Ainsi, en un seul formulaire j'ai besoin de deux textfield pour l'id et le nom & tableau de contacts à qui je suis censé choisir à partir de la grille de sélection. Et un bouton de sauvegarde qui permettra de choisir les entrées de textfields et de sélection de la grille et de l'envoyer au serveur.
Pour cela vous avez besoin des modèles associés. Un user model avec un hasMany rapport à un contact model. Ensuite, vous pouvez sauvegarder/synchroniser le magasin liées à la chargé (enregistrement de modèle d'utilisateur) de la forme ou de sauvegarder le modèle de l'utilisateur (chargé d'enregistrer dans le formulaire). docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/... docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/... docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/...
Je ne comprends pas quelle est la formule de l'ajouter ici. Vous pouvez le faire directement: { fieldLabel: 'Nom', bind: '{groupGrid.sélection.name}' },

OriginalL'auteur Tarabass

Testé sur extjs 6.

{
    xtype: 'grid',
    bind: {
        store: '{gridStore}',
        selection: '{selectedRow}' //--> used in the viewmodel
    }
}

OriginalL'auteur tarasnn

Vous devez vous connecter pour publier un commentaire.