Tengo un Formulario en el panel con un textfield y una cuadrícula. Ahora, quiero tomar userinput y obtener el valor Medio de ViewModel como json para enviarlo al servidor.

Problema aquí es que yo soy capaz de enlazar textfield así que estoy recibiendo textfield valor como un parámetro en el modelo de vista, pero ¿cómo puedo obtener seleccionado de la rejilla de la fila de datos como segundo parámetro en viewMolde.getData().

Por Ejemplo:

Modelo:

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

Vista De Modelo :

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

Vista :

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

InformationsquelleAutor Nish | 2015-08-27

2 Comentarios

  1. 4

    Primero de todo quiero decir que la omi su enfoque es erróneo. Usted no desea enviar los datos al servidor mediante la obtención de los datos de su viewmodel. Desea enviar su registro para el servidor a través de un proxy en su model o store. Los datos de su viewmodel sólo debe utilizarse para enlazar a su view. El store y la models son los datos del servidor. Pero un store se puede enlazar (y filtrado) a través de un viewmodel a su view.

    Model-View-ViewModel es un patrón donde el model es para los datos (y la migración a través de proxy), el view para representar los datos y el viewmodel a la cola de su model y su view juntos.

    Ahora mi respuesta.

    Usted puede hacer que el uso de formulas en su viewmodel. Usted puede, a continuación, enlazar la profundidad de la actual selección de la cuadrícula de su forma.

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

    Vista:

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

    Después de la edición de un model o la adición de modelos para su store guardar y sincronizar tu store o guardar su model.

    • Muchas gracias Tarabass para explicar en detalle.Que el ejemplo es bastante claro… Pero el requisito es algo diferente. Quiero recoger los datos en forma de botón de enviar algo como esto… { id:1009 , nombre : «Nishant «, los contactos:[{ teléfono:91XX correo electrónico:»[email protected]»}, { teléfono:91XX correo electrónico:»[email protected]»},{ teléfono:88XX , correo electrónico:»[email protected]»}] }
    • Así que en un solo formulario necesito dos textfield para el id y el nombre de & matriz de contactos se supone que debo de selección de la cuadrícula de selecciones. Y un botón de guardar que va a recoger las entradas a partir de campos de texto y selección de la cuadrícula y enviarlo al servidor.
    • Para que usted necesita los modelos asociados. Un user model con una relación hasMany a un contact model. A continuación, puede guardar/sincronización de la tienda relativa a la carga de registro de usuario (modelo) de la forma o guardar el modelo de usuario (cargado registro en el formulario). 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/…
    • No entiendo lo que hace la fórmula de añadir aquí. Usted puede hacer esto directamente: { fieldLabel: ‘Nombre’, se unen: ‘{groupGrid.selección.nombre}’ },
  2. 1

    Probado en extjs 6.

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

Dejar respuesta

Please enter your comment!
Please enter your name here