Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2698 in a recent build.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Virginia, USA
    Posts
    21
    Vote Rating
    0
    fhellwig is on a distinguished road

      0  

    Default Blank icons in tabbar if container has scrollable set to true

    Blank icons in tabbar if container has scrollable set to true


    REQUIRED INFORMATION

    Ext version tested:
    • Sencha Touch 2.0.1rc
    Browser versions tested against:
    • N/A (Native Android App)
    DOCTYPE tested against:
    • html
    Description:
    • Any container in another container having a bottom-docked tabbar with the scrollable config value set to true causes the tabbar icons to appear as blank squares in Android 4.0.3. This manifested itself when I was adding a dataview (list) since that overrides the container's scrollable default value of null.
    Steps to reproduce the problem:
    • Create a container with a bottom-docked tabbar. Add a dataview (or any container with scrollable: true.
    The result that was expected:
    • Tabbar icons should appear correctly.
    The result that occurs instead:
    • Blank squares appear.
    Test Case:
    Code:
    // Add this to the items of any container with a tabbar having icons
    // and deploy to Android 4.0.3 (it will correctly work in a browser).
    {
        xtype: 'dataview'
    }
    
    // or even...
    {
        xtype: 'container',
        scrollable: true // this is what the dataview class does
    }

    Screenshot or Video:
    • Others have posted various screen shots in similar reports.
    See this URL for live test case: none

    Debugging already done:
    • No additional debugging as to why this occurs was performed.
    Possible fix:
    • Set scrollable to false when adding a dataview to a tab panel. This must be done to dataview even if they are nested in sub-containers.
    Additional CSS used:
    • None
    Operating System:
    • Android 4.0.3 (emulator)

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


    So something like this?

    Code:
    new Ext.tab.Panel({
        fullscreen : true,
        tabBar     : {
            docked : 'bottom'
        },
        items      : [
            {
                xtype      : 'container',
                title      : 'Test',
                scrollable : true
            }
        ]
    });
    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
    Feb 2012
    Posts
    12
    Vote Rating
    0
    m3m3nto is on a distinguished road

      0  

    Default So?

    So?


    I'm facing the same problem but I couldn't find a solution (or a work around). The "possible solution" doesn't work. So what is a possible fix?

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Vote Rating
    1
    troels is on a distinguished road

      0  

    Default Example

    Example


    I think the example has to be a little more elaborate to trigger the error:

    Code:
    Ext.define('app.view.Main', {
        extend: 'Ext.Panel',
    
    
        config: {
            items: [
                {
                    xtype: 'tabbar',
                    docked: 'bottom',
                    items: [
                        {
                            title: 'Start',
                            html: 'Start',
                            iconCls: 'home',
                        }
                    ]
                }, {
                    xtype      : 'container',
                    title      : 'Test',
                    scrollable : true
                }
            ]
        }
    });
    This is what causes the error in my case. As you see, the items in the tabbar has to have an icon mask with iconCls before the error is visible.

    More details can be seen in this parallel case: http://www.sencha.com/forum/showthread.php?182171-Beta-3-Toolbar-Icons-not-rendering-on-Tabbar-in-Android-4.0&p=761940#post761940

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


    I'm not seeing why adding the container with scrollable is doing anything to the tabbar. If the icon is a blank square that means the browser doesn't support webkit mask CSS.
    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
    Feb 2012
    Posts
    26
    Vote Rating
    1
    troels is on a distinguished road

      0  

    Default


    Me neither, but none the less.

    The code I submitted should render with this error. The reason I know it works before adding the scrollable component is because in my code, I use a card layout for the main container and have no additional items besides the tab bar. Upon setting first view active, the masks turn from icons to squares.

    As for what Google can tell me, nobody has any clue why this stopped working in android 4 (browser 4.0.3 henceforth).

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    698
    Vote Rating
    40
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    same issue when I pack the app for android and let it run on my Nexus Galaxy (ICS). there are 3 views on the tab bar. all of them set to scrollable. result=no icons on the tab bar. when I set the 1. view to scrollable=false, then I get the icons on the tab bar. however switching to another tab will make them disappear. coming back to the 1. tab will make them reappear. the same app works fine on an older HTC Desire with 2.3.1.

  8. #8
    Sencha - Sencha Touch Dev Team
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    19
    RossGerbasi will become famous soon enough RossGerbasi will become famous soon enough

      0  

    Default


    I am also having the same issue when using a Map on android. I have not confirmed it has to do with the scrollable property but I currently have 5 tabs. When i switch to map all the icons go "missing" to the box shape. When i switch to any other tab they come back.

    Again this is on android i am running 2.3.6 and Sencha RC 1. Very frustrating any workarounds???

    -ross

  9. #9
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Sounds like there's still some issues in 4.0.3 with webkit masks and transforms. We'll see what we can do to work around this issue.

    Sencha Inc

    Jamie Avins

    @jamieavins

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    255
    Vote Rating
    2
    landed is on a distinguished road

      0  

    Default Confirmation of issue.

    Confirmation of issue.


    I can confirm I have this issue. for me setting scrollable makes the icons go square, fine on android and in the pc browser webkit.
    I was thinking of setting an image manually but no joy. I think my css is wrong.

    .x-tab .x-button-icon.charty,
    .x-button .x-button-icon.x-icon-mask.charty {
    /*-webkit-mask-image: url('http://cambs.eu/mobile01/img/charty.png');*/
    -webkit-mask-box-image: url('http://cambs.eu/mobile01/img/charty.png');
    }

    I feel it has to do with the tabbar sizing ever so slightly as I can see the icon title shimmer a bit. I also isolated the code to the scrollable setting on the view. So removing that and all is well. Just of interest the icons go to blocks mid animation between tabs then on a tab that has no issues all the icons display again.

    One other thing to note is that I am having usually to set the width or height as a fixed pixel size for the scroll to work this could cause the tabbar to slightly adjust its own size ? hence the flicker on the texts.

    I'm using 2.0.0 gpl version.

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