Results 1 to 3 of 3

Thread: [beginner] Grid and access to values

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jan 2017
    Posts
    2

    Default [beginner] Grid and access to values

    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) :

    Code:
    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 :
    Code:
    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.

  2. #2
    Sencha User
    Join Date
    Jan 2017
    Posts
    2

    Default bug ?

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

  3. #3
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    Add this to your grid store config:
    Code:
    bind: {
      data: '{voucher_detail}'
    }

Similar Threads

  1. Replies: 4
    Last Post: 5 Sep 2014, 4:47 AM
  2. beginner question, how to access a local json file
    By agruss in forum Sencha GXT Q&A
    Replies: 1
    Last Post: 4 Jul 2012, 6:54 PM
  3. How to Access Grid Summary values
    By smulange in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Sep 2010, 5:44 AM
  4. How to access a Grid's store (all values) when using Pagination?
    By jmhwhite2001 in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 25 Feb 2010, 10:30 AM
  5. Access combo box values
    By noah977 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 4 Mar 2008, 2:09 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •