1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default Viewport not correctly shown

    Viewport not correctly shown


    Have 2 problem: (I set autoCreateViewport to true at my app.js)

    1. If I use dockedItems, then the toolbar won't be shown at all. The screen is totally blank

    Code:
    Ext.define('App.view.Viewport', {
        extend : 'Ext.Panel',
        xtype  : 'app-viewport',
        config : {
            fullscreen : true,
            layout     : 'card',
            dockedItems: 
            [{
                docked: 'top',
                xtype:'toolbar',
                itemId:'toolbar',
                title:APPNAME,
                items: 
                [{
                    ui:'action',
                    itemId:LEFTBTN,
                },
                { xtype: 'spacer' },
                {
                    ui:'action',
                    itemId:RIGHTBTN,
                }],      
            }]
        }
    });
    2. If I used Items, then the toolbar title is not in middle

    Code:
    Ext.define('App.view.Viewport', {
        extend : 'Ext.Panel',
        xtype  : 'app-viewport',
        config : {
            fullscreen : true,
            layout     : 'card',
            items: 
            [{
                xtype        : 'toolbar',
                docked       : 'top',
                title        : 'ViewPort',
                items        : 
                [{
                    text   : 'Back',
                    ui     : 'action',
                    itemId : LEFTBTN,
                   // hidden : true
                },{xtype:'spacer'},
                {
                    text   : 'Back',
                    ui     : 'action',
                    itemId : RIGHTBTN,
                 //   hidden : true
                }]
            }]
        }
    });
    Here is the screen shot:

    4.jpg

    What's wrong with it? Can anybody help? Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,668
    Vote Rating
    746
    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 using the TitleBar instead:

    Code:
    Ext.define('App.view.Viewport', {
        extend : 'Ext.Panel',
        xtype  : 'app-viewport',
        config : {
            fullscreen : true,
            layout     : 'card',
            dockedItems: 
            [{
                docked: 'top',
                xtype:'titlebar',
                itemId:'toolbar',
                title:APPNAME,
                items: 
                [{
                    ui:'action',
                    itemId:LEFTBTN,
                    align: 'left'
                },
                {
                    ui:'action',
                    itemId:RIGHTBTN,
                    align: 'right'
                }],      
            }]
        }
    });
    Notice the new xtype that replaced toolbar and the align config on the buttons. And the removed spacer.
    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
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Thanks.I'll try that.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    I did two test:

    1. I changed the items to dockedItmes and changed the xtype to 'titlebar', still blank screen

    2. I changed back dockedItems to items and xtype to 'navigationbar', everything works fine. The alignment is also correct.

    But according to the document, the navigationbar is private, can I use it?

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Can I use navigationbar?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,668
    Vote Rating
    746
    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


    Sorry, didn't notice you were using dockedItems. All you docked components should live within the items array:

    Code:
    Ext.define('App.view.Viewport', {
        extend : 'Ext.Panel',
        xtype  : 'app-viewport',
        config : {
            fullscreen : true,
            layout     : 'card',
            items      : [
                {
                    xtype  : 'titlebar',
                    docked : 'top',
                    itemId : 'toolbar',
                    title  : APPNAME,
                    items  : [
                        {
                            ui     : 'action',
                            itemId : LEFTBTN,
                            align  : 'left'
                        },
                        {
                            ui     : 'action',
                            itemId : RIGHTBTN,
                            align  : 'right'
                        }
                    ]
                }
            ]
        }
    });
    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.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Works too. Thanks. Mitchell, you're the best.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar