Extjs 5-将我的网格链接到Viewmodel

我设法将所需的数据放在modelView中

Controller.js

init: function ()
{
    var me = this;

    this.mainView = this.getView().add(Ext.create('Tsi.app.tsp_use.details.MainView'));

    var customer_id = this.view.customer_id;
    var transaction_id = this.view.transaction_id;

    this.mainView.on('afterrender', function () {

        //Recherche des infos de la transaction
        Ext.Ajax.request({
            url: '/app/tspuse/detail',
            params:
                    {
                        customer_id: customer_id,
                        transaction_id: transaction_id
                    },
            success: function (response)
            {
                //Passer de l'item "page de chargement" à l'item suivant ici (1)
                me.mainView.getLayout().setActiveItem(1);

                //response.data tab clef => $valeur 
                me.mainView.getViewModel().setData(response.data);

                console.log('hello : ', response.data);
                console.log('hello 2: ', me.mainView.getViewModel());
                console.log('hello 3: ', me.mainView.getViewModel().data.vouchers_detail);
            }
        });
    });
},

以下是控制台中的数据：

但我不知道如何将它们绑定到我的mainView第三个选项卡中的研磨（请参见注释）：

Ext.define（'Tsi.app.tsp\u use.details.MainView'{
扩展：“Tsi.os.view.BaseAppView”，
bodyCls:“DPEW_body_detail”，
布局：“卡片”，
视图模型：{
数据：{}
},
项目：[{
xtype:'容器'，
cls:“直接付款详细信息帮助”，
布局：“中心”，
html:“”+“directpayment\u transaction.wait.”.\u（）+“
”
}, {
边界：错，
xtype:'tabpanel'，
buttonAlign:'左'，
titleAlign:'左'，
朴素：没错，
tabPosition:'左'，
tabRotation:0，
默认值：{
边界：错，
buttonAlign:'左'，
标题：“左”
},
听众：{
tabchange:'onTabChange'
},
项目：[
/**
*第一选项卡
*/
{
图标：'/img/icons/16/man.png'，
bodyStyle:'background:url（/img/icons/256/Search-Male-User_alpha.png）右下角不重复'，
xtype:'面板'，
标题：“directpayment\u transaction.tab\u user.”，
待定：[
'->',
{
xtype:'容器'，
文本：“directpayment\u transaction.customer.head\u text.”.（）
},
{
图标：'/img/icons/16/text\u list\u bullets.png'，
文本：“directpayment\u transaction.customer.show\u all\u transaction.”，
处理程序：“customerShowAllTransactions”
},
{
图标：'/img/icons/16/Bar chart.png'，
文本：“directpayment\u transaction.customer.show\u图表\u transaction.”，
处理程序：“customerShowStats”
},
],
布局：“适合”，
项目：{
边界：错，
填充：10，
xtype:'fieldcontainer'，
labelAlign:“顶部”，
标签宽度：100，
默认值：{
保证金：0，
填充：0，
标签分离器：''，
hideEmptyLabel:错误
},
项目：[{
希德拉贝尔：没错，
字段标签：“”，
xtype:'displayfield'，
//浇注日期：客户\出生日期：this.toDate->applique la fonction toDate du Controller
绑定：{
值：“{customer\u first\u name:htmlEncode}{customer\u last\u name:htmlEncode}-{customer\u birth\u date:htmlEncode}”
},
cls:“直接付款\详细信息\组”
},
{
fieldLabel:“directpayment\u transaction.customer.address.”，
xtype:'displayfield'，
绑定：{
值：“{customer_address:htmlEncode}”
}
},
{
字段标签：“”，
xtype:'displayfield'，
绑定：{
值：“{customer\u zipcode:htmlEncode}{customer\u city:htmlEncode}”
}
},
{
字段标签：“”，
xtype:'displayfield'，
绑定：{
值：“{customer\u country:htmlEncode}”
}
},
{
fieldLabel:“directpayment\u transaction.customer.phone.”，
xtype:'displayfield'，
绑定：{
值：“{customer_phone:htmlEncode}”
}
},
{
fieldLabel:“directpayment\u transaction.customer.mobile.”，
xtype:'displayfield'，
绑定：{
值：“{customer\u mobile:htmlEncode}”
}
},
{
fieldLabel:“directpayment\u transaction.customer.email.”，
xtype:'displayfield'，
绑定：{
值：“{customer_email:this.toMail}”
}
}
]
}
},
/**
*第二选项卡
*/
{
图标：'/img/icons/16/money\u euro.png'，
车身衬垫：10，
标题：“directpayment.panel\u detail.tab\u transaction.”，
bodyStyle:'背景：url（/img/icons/256/shopping-basket-full_alpha.png）不重复右下角'，
布局：“适合”，
溢出：“自动”，
项目：{
边界：错，
填充：10，
xtype:'fieldcontainer'，
labelAlign:“顶部”，
标签宽度：100，
默认值：{
保证金：0，
填充：0，
标签分离器：''，
标签宽度：200，
hideEmptyLabel:错误
},
项目：[{
希德拉贝尔：没错，
字段标签：“”，
xtype:'displayfield'，
绑定：{
值：“{payment_status:this.renderStatus}”
},
cls:“直接付款\详细信息\组”
},
{
fieldLabel:“directpayment\u transaction.transaction.date.”，
xtype:'displayfield'，
//浇注日期：事务\u时间\u创建：this.toDate->applique la fonction toDate du Controller
绑定：{
值：“{transaction\u dtime:this.toDateStr}”
}
},
{
fieldLabel:“directpayment\u transaction.transaction.tids.”，
xtype:'displayfield'，
绑定：{
值：“{transaction\u tid:htmlEncode}”
}
},
{
fieldLabel:“directpayment\u transaction.transaction.amount.”，
xtype:'displayfield'，
绑定：{
值：'{tr
Ext.define('Tsi.app.tsp_use.details.MainView', {
  extend: 'Tsi.os.view.BaseAppView',
  bodyCls: 'DPEW_body_detail',
  layout: 'card',
  viewModel: {
    data: {}
  },
  items: [{
    xtype: 'container',
    cls: 'directpayment_detail_help',
    layout: 'center',
    html: '<p>' + 'directpayment_transaction.wait'._() + '</p>'
  }, {
    border: false,
    xtype: 'tabpanel',
    buttonAlign: 'left',
    titleAlign: 'left',
    plain: true,
    tabPosition: 'left',
    tabRotation: 0,
    defaults: {
      border: false,
      buttonAlign: 'left',
      titleAlign: 'left'
    },
    listeners: {
      tabchange: 'onTabChange'
    },
    items: [

      /**
        * FIRST TAB
        */
      {

        icon: '/img/icons/16/man.png',
        bodyStyle: 'background: url(/img/icons/256/Search-Male-User_alpha.png) no-repeat bottom right',
        xtype: 'panel',
        title: 'directpayment_transaction.tab_user'._(),
        tbar: [
          '->',
          {
            xtype: 'container',
            text: 'directpayment_transaction.customer.head_text'._()
          },
          {
            icon: '/img/icons/16/text_list_bullets.png',
            text: 'directpayment_transaction.customer.show_all_transaction'._(),
            handler: 'customerShowAllTransactions'
          },
          {
            icon: '/img/icons/16/Bar-chart.png',
            text: 'directpayment_transaction.customer.show_chart_transaction'._(),
            handler: 'customerShowStats'
          },
        ],
        layout: 'fit',
        items: {
          border: false,
          padding: 10,
          xtype: 'fieldcontainer',
          labelAlign: 'top',
          labelWidth: 100,
          defaults: {
            margin: 0,
            padding: 0,
            labelSeparator: '',
            hideEmptyLabel: false
          },
          items: [{
            hideLabel: true,
            fieldLabel: '',
            xtype: 'displayfield',
            //pour la date : customer_birth_date:this.toDate -> applique la fonction toDate du Controller
            bind: {
              value: '{customer_first_name:htmlEncode} {customer_last_name:htmlEncode} - {customer_birth_date:htmlEncode}'
            },
            cls: 'directpayment_detail_group'

          },
                  {
                    fieldLabel: 'directpayment_transaction.customer.address'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_address:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: ' ',
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_zipcode:htmlEncode} {customer_city:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: ' ',
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_country:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.customer.phone'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_phone:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.customer.mobile'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_mobile:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.customer.email'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{customer_email:this.toMail}'
                    }
                  }

                 ]
        }
      },

      /**
        * SECOND TAB
        */
      {

        icon: '/img/icons/16/money_euro.png',
        bodyPadding: 10,
        title: 'directpayment.panel_detail.tab_transaction'._(),
        bodyStyle: 'background: url(/img/icons/256/shopping-basket-full_alpha.png) no-repeat bottom right',

        layout: 'fit',
        overflowY: 'auto',
        items: {
          border: false,
          padding: 10,
          xtype: 'fieldcontainer',
          labelAlign: 'top',
          labelWidth: 100,
          defaults: {
            margin: 0,
            padding: 0,
            labelSeparator: '',
            labelWidth: 200,
            hideEmptyLabel: false
          },
          items: [{
            hideLabel: true,
            fieldLabel: '',
            xtype: 'displayfield',
            bind: {
              value: '{payment_status:this.renderStatus}'
            },
            cls: 'directpayment_detail_group'

          },
                  {
                    fieldLabel: 'directpayment_transaction.transaction.date'._(),
                    xtype: 'displayfield',
                    //pour la date : transaction_dtime_creation:this.toDate -> applique la fonction toDate du Controller
                    bind: {
                      value: '{transaction_dtime:this.toDateStr}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.transaction.tids'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{transaction_tid:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.transaction.amount'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{transaction_amount:this.toMoney}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.transaction.currency'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{transaction_currency:htmlEncode}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_transaction.transaction.detail'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{transaction_detail}'
                    }
                  },
                  {
                    fieldLabel: 'directpayment_v1_transaction.merchant.name'._(),
                    xtype: 'displayfield',
                    bind: {
                      value: '{merchant_label}'
                    }
                  },
                 ]
        }

      },
      /**
        * THIRD TAB
        */
      {
        icon: '/img/icons/16/barcode-16.png',
        bodyPadding: 10,
        title: 'tsp_use.panel_detail.tab_vouchers.title'._(),
        bodyStyle: 'background: url(/img/icons/256/shopping-basket-full_alpha.png) no-repeat bottom right',

        layout: 'fit',
        overflowY: 'auto',
        items: {
          border: false,
          padding: 10,
          xtype: 'grid',
          labelAlign: 'top',
          labelWidth: 100,
          defaults: {
            margin: 0,
            padding: 0,
            labelSeparator: '',
            labelWidth: 200,
            hideEmptyLabel: false
          },
          columns: [{
            text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_sn'._(),
            dataIndex: 'voucher_ticket_sn',
            flex: 1
          },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_amount'._(),
                      dataIndex: 'voucher_ticket_amount',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_balance'._(),
                      dataIndex: 'voucher_ticket_balance',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_id'._(),
                      dataIndex: 'merchant_id',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_name'._(),
                      dataIndex: 'merchant_name',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_address'._(),
                      dataIndex: 'merchant_address',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_zipcode'._(),
                      dataIndex: 'merchant_zipcode',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_city'._(),
                      dataIndex: 'merchant_city',
                      flex: 1
                    },
                    {
                      text: 'tsp_use.panel_detail.tab_vouchers.merchant_country'._(),
                      dataIndex: 'merchant_country',
                      flex: 1
                    },
                   ],

          store: {
            fields: [
              'voucher_ticket_sn',
              'voucher_ticket_amount',
              'voucher_ticket_balance',
              'merchant_id',
              'merchant_name',
              'merchant_address',
              'merchant_zipcode',
              'merchant_city',
              'merchant_country'
            ],

            /*
             * How to access datas in viewModel ?
             *
             * bind:{} instead of proxy:{} ?
             *
             */

            proxy: {
              type: 'ajax',

              url: '',
              pageSize: 25,

              reader: {}
            },
            autoLoad: false
          },
        }
      },
    ]
  }]
});

viewModel: {
        data: {            
            arrayData: undefined
        },

        stores: {
            storeName: {
                data: '{arrayData}'
            }
        }
}