1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default DataView not displaying within a panel

    DataView not displaying within a panel


    I have been trying to convert my application from ST1 to ST2-B2, and have run into a problem that really has me stumped. After initially logging into my application (which is working fine), control is transferred to a new controller and view. My view is supposed to have two toolbars, one on top and one on bottom, and a dataview. The toolbars are displaying without a problem, but the dataview does not display. I define it in a separate file, but I have also tried defining it directly in the view. The bottom toolbar (familyToolBar) is defined in a separate file, which I am not including at this time since it appears to be working.

    After I create and display my view, I log the view object to the console so I can examine it. I can see that it contains the dataview, and that there is data within it. It just will not display on the screen. I have been struggling with this for quite awhile, and I hope somebody can see where I’m going wrong in my code.

    Here is my DataView:
    Code:
    Ext.define('DcwMobile.view.StatementDataView', {
        extend:'Ext.dataview.DataView',
        
        xtype: 'statementDV',
        config: {
            store: statementStore,
            itemId: 'statementDV',
            itemTpl: [
                '<div><table width="100%"><tr><td align="left">{fullName}</td><td align="right">{companyName}</td></tr>'+
                '<tr><td colspan="2"><b>Statement ID: </b>{statementId}</td></tr>' +
                '<tr><td colspan="2"><b>Period: </b>{beginDate} to {endDate}</td></tr>'+
                '<tr><td colspan="2"><b>Balance Due: </b>{balanceDue}</td></tr>'+
                '</table></div>'
            ]
        },
        
        initialize: function() {
            this.callParent(arguments);
        }
    });
    This is my Panel View code:
    Code:
    Ext.define('DcwMobile.view.StatementListView', {
        extend: 'Ext.Panel',
        
        config: {
            itemId: 'statementListView',
            items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                items: [
                    {
                        xtype: 'component',
                        html: '<h1><div class="x-toolbar-component-title">Statements</div></h1>'
                    },
                    {     xtype: 'spacer' },
                    {
                        text: '<div id="b-amt" class="x-label-component-amt">Pay</div>',
                        ui: 'confirm-round',
                        action: 'pay'
                    }
                ]
            },{
                xtype: 'statementDV',
                width: '100%'
            },{ 
                xtype: 'component',     //just here to see if something appears on the screen besides the toolbars
                html: 'some junk'
            },{
                xtype: 'familyToolBar'
            }
            ],
    
            listeners: {
                activate: {
                    fn: function () {
                        statementRecord = statementStore.first();
                        balanceDue = statementRecord.get('balanceDue');    
                        var payButton = Ext.ComponentQuery.query('button[action=pay]');
                        //console.log(payButton);
                        //Ext.getPayButton().setText('Pay Balance Due: '+balanceDue);
                        //payButton.setText('Pay Balance Due: '+balanceDue);
                    }
                }
            }
        },
    
        initialize: function() {
            this.callParent(arguments);
        }
     });
    This is the code within my Controller to display this View. (I plan to add a second dataview or a touch grid panel to the screen later, which is why I am loading a second store here.)
    Code:
        displayStatement: function (options) {
    
            console.log('Statement Page');
            var count = statementStore.getCount();
            //If the Statement information hasn't been loaded yet, load it now 
            if(count == 0) {
                statementStore.load({
                    callback: function(records, operation, success) {
                        statementDetailStore.load({
                            callback: function(records, operation, success) {
                                statementListView = Ext.create('DcwMobile.view.StatementListView');
                                mainView.setActiveItem(statementListView,
                                    { type: 'slide', direction: 'right' }
                                );
                                console.log(statementListView);
                            }
                        });
                    }
                });
            }
            //Statement store has been loaded; assume details have also been loaded; go straight to the page
            else {
                mainView.setActiveItem(
                    statementListView,
                    { type: 'slide', direction: 'right' }
                );
            }
        },
    I hope this is enough code for someone to spot what I am forgetting or doing wrong. Let me know if you need to see additional code. Thanks.

    Sue

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,124
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You need to use a layout on your panel to manage the height or give the dataview a height. That and I would also inspect the DOM to make sure your store has data.

    Also, if you aren't doing anything in the initialize method, I wouldn't have it in there. Just a waste of space.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    Thank you so much. I set my layout to 'vbox' in the panel and set my height in the dataview, and everything displays perfectly.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default Now Ext.ux.touch.grid not displaying in panel

    Now Ext.ux.touch.grid not displaying in panel


    I am now having a similar problem to the one above. I got my DataViews to display properly, and now I am trying to display a touch grid view. I've inspected the DOM for the panel and can see that the grid view is there, that it sees its store and that there is data to be displayed.

    Here is the code for my grid:
    Code:
    Ext.define('DcwMobile.view.StatementDetailGrid', {
        extend: 'Ext.ux.touch.grid.View',
        xtype: 'statementDetailGrid',
        
        config: {
            store: statementDetailStore,
            itemId: 'statementDetailGrid',
            fullscreen : true,
            multiSelect: false,
            columns    : [{
                header    : "Date",
                dataIndex : "postDate",
                style     : "text-align: left;",
                width     : '15%'
            },{
                header    : "Description",
                dataIndex : "description",
                width     : '70%'
            },{
                header    : "Amount",
                dataIndex : "amount",
                width     : '15%',
                style     : "text-align: right;",
                renderer  : function(val) {
                    var color = (val > 0) ? "000000" : "FF0000";
                    return "<span style='color: #" + color + ";'>" + val.toFixed(2) + "</span>";
                }
            }]
        }
    });
    Here is the code for the panel that contains the grid:
    Code:
    Ext.define('DcwMobile.view.StatementListView', {
        extend: 'Ext.Panel',
        
        config: {
            itemId: 'statementListView',
            layout: 'vbox',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'component',
                            html: '<h1><div class="x-toolbar-component-title">Statements</div></h1>'
                        },
                        {     xtype: 'spacer' },
                        {
                            text: '<div id="b-amt" class="x-label-component-amt">Pay</div>',
                            ui: 'confirm-round',
                            action: 'pay'
                        }
                    ]
                },{
                    xtype: 'statementDV'
                },{        
                    xtype: 'statementDetailGrid',
                    height: 500
                },{
                    xtype: 'familyToolBar'
                }
            ],
    
    
            listeners: {
                activate: {
                    fn: function () {
                        statementRecord = statementStore.first();
                        balanceDue = statementRecord.get('balanceDue');    
                        var payButton = Ext.ComponentQuery.query('button[action=pay]');
                        //Ext.getPayButton().setText('Pay Balance Due: '+balanceDue);
                        //payButton.setText('Pay Balance Due: '+balanceDue);
                    }
                }
            }
        }
    });
    The code for my controller is the same as before:
    Code:
        displayStatement: function (options) {
    
    
            console.log('Statement Page');
            var count = statementStore.getCount();
            //If the Statement information hasn't been loaded yet, load it now 
            if(count == 0) {
                statementStore.load({
                    callback: function(records, operation, success) {
                        statementDetailStore.load({
                            callback: function(records, operation, success) {
                                statementListView = Ext.create('DcwMobile.view.StatementListView');
                                mainView.setActiveItem(statementListView,
                                    { type: 'slide', direction: 'right' }
                                );
                                console.log(statementListView);
                            }
                        });
                    }
                });
            }
            //Statement store has been loaded; assume details have also been loaded; go straight to the page
            else {
                mainView.setActiveItem(
                    statementListView,
                    { type: 'slide', direction: 'right' }
                );
            }
        },
    I'm just not sure what I'm doing wrong. Any help would be appreciated.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,124
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Try

    Code:
    layout : {
        type  : 'vbox',
        align : 'stretch'
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    I just tried that, but the grid still doesn't display.

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,124
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by ghawazigirl View Post
    I just tried that, but the grid still doesn't display.
    Inspect the DOM to figure out what's going on. Is it a sizing issue, is it a store issue, is it a model field issue?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    I removed the 'fullscreen: true' from my grid panel definition, and it worked.

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    0
    henrynguyen is on a distinguished road

      0  

    Default


    Hi mitchellsimoens,
    Can you help me how to show news in DataView???? I have sample in this link http://www.sencha.com/forum/showthre...536#post835536.

    Help me?????

Thread Participants: 2

Tags for this Thread