BINDING between Form and Grid Extjs

So what I'm trying to achieve is to populate the Form with the selected row records and/or to edit the rows through form, via the ViewModel so it's two-way binding, I have done soo in the states field but I'm having trouble with the other fields, I have tried formulas but that didn't work either. Here is a handler that did console the records but I can't bind them with the form fields.

   store = this.getView().getStore();
         var records = record.getSelected().items[0].data;
                //var record = records[0];
                 console.log('showChart',records)
                if (records) {
                    this.getView().getDialog().loadRecord(records);
                }
       console.log(records.name);

Here is my Fiddle example

You need to transport the selected record to the form and also set the bind (bind: {value: ''}) property of the form fields. A simple way is to pass the selected grid record to the Test.main.Form's viewModel. Look:

mainController.js:

...
showChart: function (record, selModel) {

    var form = Ext.create({
        xtype: 'testform'
    });

    //selModel is actually an array of selected records.
    form.getViewModel().set('record', selModel[0]);

    form.show();

},
...

form.js:

...
items: [{
    label: 'First Name',
    name: 'first',
    bind: {
        //record that was set in the showChart function.
        value: '{record.name}'
    }
...

Try with the other fields.

I hope this helps. Any questions, let me know.