Обновление сетки и формы одновременно

Question

Мое приложение имеет сетку и форму (для записи подробно).

Когда я обновляю запись, я собирался одновременно обновлять сетку и форму (до store.sync()).

Любая идея, как это сделать?

В случае моей скрипки, после обновления (кнопка редактирования), форма будет обновляться только в том случае, если вы щелкнете в другой строке сетки и снова щелкните повторно на отредактированной строке.

Fiddle: https://fiddle.sencha.com/#fiddle/12v7

Редакция: см комментариев. https://fiddle.sencha.com/#fiddle/1303

Answer 1

Использование связывания данных: Fiddle

Ext.define('ViewerModel', { 
    extend: 'Ext.app.ViewModel', 
    alias: 'viewmodel.viewermodel', 

    stores: { 
     mystore: { 

      fields: ['name', 'email', 'phone'], 
      data: [{ 
       name: 'Lisa', 
       email: 'lisa@simpsons.com', 
       phone: '555-111-1224' 
      }, { 
       name: 'Bart', 
       email: 'bart@simpsons.com', 
       phone: '555-222-1234' 
      }, { 
       name: 'Homer', 
       email: 'homer@simpsons.com', 
       phone: '555-222-1244' 
      }, { 
       name: 'Marge', 
       email: 'marge@simpsons.com', 
       phone: '' 
      }] 
     } 
    } 
}); 


Ext.define('APP.HorizontalBox', { 
    extend: 'Ext.container.Container', 
    xtype: 'layout-horizontal-box', 
    width: 800, 
    height: 300, 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 

    viewModel: { 
     type: 'viewermodel' 
    }, 

    items: [{ 
     xtype: 'grid', 
     flex: 1, 
     margin: '0 10 0 0', 
     bind: { 
      store: '{mystore}', 
      selection: '{user}' 
     }, 

     columns: [{ 
      text: 'Name', 
      dataIndex: 'name', 
      flex: 1 
     }, { 
      text: 'Email', 
      dataIndex: 'email', 
      flex: 2 
     }, { 
      text: 'Phone', 
      dataIndex: 'phone', 
      flex: 2 
     }], 

     tbar: [{ 
      xtype: 'form', 
      items: [{ 
       xtype: 'textfield', 
       name: 'name', 
       bind: '{user.name}' 
      }, { 
       xtype: 'textfield', 
       name: 'email', 
       bind: '{user.email}' 
      }, { 
       xtype: 'textfield', 
       name: 'phone', 
       bind: '{user.phone}' 
      }] 
     }], 
    }, { 
     xtype: 'form', 
     flex: 1, 
     margin: '0 10 0 0', 

     items: [{ 
      xtype: 'displayfield', 
      fieldLabel: 'Name', 
      name: 'name', 
      bind: '{user.name}' 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Email', 
      name: 'email', 
      bind: '{user.email}' 
     }, { 
      xtype: 'displayfield', 
      fieldLabel: 'Phone', 
      name: 'phone', 
      bind: '{user.phone}' 
     }] 
    }] 
}); 

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.create('APP.HorizontalBox', { 
      renderTo: document.body, 
      width: 800, 
      height: 400 
     }); 

    } 
});