Extjs 5 - Link my grid to the Viewmodel - extjs

Question

I manage to put the datas I need in a 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);
}
});
});
},
Here are the datas in the console :
console datas
But I don't know how to bind them to my grind in the third tab of my mainView (see comments) :
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
},
}
},
]
}]
});
It works for the displayfield, but I failed to bind the datas to voucher_detail to my grid.

Answer 1

Try it this way:
viewModel: {
data: {
arrayData: undefined
},
stores: {
storeName: {
data: '{arrayData}'
}
}
}
and then you just need to bind the store to the grid.