[beginner] Grid and access to values

[QuentinP]

Hello, i'm a very new beginner in extJs and javascript in general. Here is the context : I must access datas in a viewModel and put some of them in a grid but don't know how.
The view is a window with three tab, I comment the tab below, the problem is at the grind in the third tab.

1. I don't know how to see what's in the view model, how the datas are arrange.
2. I don't know how to load the datas in my grid

Here is the object of data that i put in my view model :

Attachment 55777

And here's the code of my mainView (note that informations in others tab are displaying correctly) :

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 ?
                            */
                            
                            proxy: {
                                type: 'ajax',


                                url: '',
                                pageSize: 25, 
                                
                                reader: {
                                }
                            },


                           
                            autoLoad: false
                        },
                    }


                },
            ]




        }
    ]
});

EDIT :
I find the way to look my view model, the datas are there :

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

give me in the console :
Attachment 55786

So i try to use "bind:{'{voucher_detail}'}" or bind:{getViewModel().data.voucher_detail} in the paramaters of my grid in the mainView. I think i miss knowledge here in js to define the variable or just simply get a data in my mainView.

[QuentinP]

Is there a bug ? I can't see or edit the post.
Thanks

[chramer]

Add this to your grid store config:

bind: {
  data: '{voucher_detail}'
}