ExtJs How to bind grid record in ViewModel fields?

Question

I have one Form panel with one textfield and a grid. Now, I want to take userinput and get the value Through ViewModel as json to send it to server.

Problem here is, I am able to bind textfield so I am getting textfield value as one parameter in view model but how can I get selected grid row data as second parameter in viewMolde.getData().

For Example:

Model:

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

View Model :

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

View :

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

It's a wonder that you get the `name field` in this way. A viewmodel doesn't have a `model property` (for a reason) and you should remove it. Look at the possible config options: http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.app.ViewModel — Tarabass, Aug 27 '15 at 19:37

score 5 · Answer 1 · edited Apr 15 '18 at 11:41

First of all I want to say that imo your approach is wrong. You don't want to send your data to the server by getting your data from your viewmodel. You want to send your record to the server through a proxy on your model or store. The data from your viewmodel should only be used to bind to your view. The store and the models are your server data. But a store can be bind (and filtered) through a viewmodel to your view.

Model-View-ViewModel is a pattern where the model is for your data (and migration through proxy), the view to represent your data and the viewmodel to glue your model and your view together.

Now my answer.

You can do that using formulas on your viewmodel. You can then bind deep the current selection of the grid to your form.

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

View:

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

After editing a model or adding models to your store save/sync your store or save your model.

Thank you very much Tarabass for explaining in detail.You example is quite clear... But requirement is something different. I want to pick data on form submit button something like this... { id:1009 , name : "Nishant ", contacts:[{ phone:91XX , email:"nish@xyz.com"}, { phone:91XX , email:"nirav@abc.com"},{ phone:88XX , email:"alok@nmp.com"}] } — Nish, Aug 27 '15 at 19:16
So in one single form I need two textfield for id and name & array of contacts I am supposed to pick from grid selections. And one save button which will pick inputs from textfields and grid selection and send it to server. — Nish, Aug 27 '15 at 19:24
For that you need associated models. A `user model` with a hasMany relation to a `contact model`. Then you can save/sync the store related to the loaded record (user model) of the form or save the user model (loaded record in form). http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.Model-cfg-hasMany http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.field.Field-cfg-reference http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.schema.Association — Tarabass, Aug 27 '15 at 19:35
I do not understand what does the formula add here. You could do this directly: { fieldLabel: 'Name', bind: '{groupGrid.selection.name}' }, — aszahran, Jun 22 '16 at 08:22

score 1 · Answer 2 · edited Apr 15 '18 at 11:38

1

Tested on extjs 6.

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

edited Apr 15 '18 at 11:38

Narendra Jadhav

10,052
15
33
44

answered Sep 30 '16 at 08:43

tarasnn

74
5

ExtJs How to bind grid record in ViewModel fields?

2 Answers2