Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Sencha Touch 2.4.1 Layout Error

  1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    52
    Answers
    1

    Default Answered: Sencha Touch 2.4.1 Layout Error

    Hi,

    I'm trying to play around with Sencha Touch 2.4.1 and using the TabPanel Code from the sencha samples. When I tested this using JSFiddle, it produces the layout properly, tabs and all. But when I tested this in my local server, the tabs stretched all the way down. ( Attached screenshot ). I also included my codes. Any help would be appreciated.

    I used Google Chrome Developer tools to emulate the tablet. Disabling the developer tools does not change the layout problem.

    Thanks

    Code:

    Code:
    <link rel="stylesheet" href="../includes/js/st24/resources/css/cupertino.css" type="text/css">
        <script src="../includes/js/st24/sencha-touch-all-debug2.js" type="text/javascript"></script>
        <script>
    
            Ext.application({
    
                isIconPrecomposed: false,
    
    
    
                requires: [
                    'Ext.tab.Panel'
                ],
    
                launch: function() {
                    Ext.Viewport.add({
    
                        xtype: 'tabpanel',
    
    
                        items: [
                            {
                                title: 'Tab 1',
    
                                items: {
                                    html: '1',
                                    centered: true
                                },
    
                                cls: 'card1'
                            },
                            {
                                
                                title: 'Tab 2',
    
                                
                                items: {
                                    html: '2',
                                    centered: true
                                },
    
                                
                                cls: 'card2'
                            },
                            {
                                
                                title: 'Tab 3',
    
                                
                                items: {
                                    html: '3',
                                    centered: true
                                },
    
                                
                                cls: 'card3'
                            }
                        ]
                    });
                }
            });
    
        </script>

    chrome.jpg

  2. I found the problem....
    <!DOCTYPE HTML>
    was missing from the top of my html/jsp file...
    the little things that goes unnoticed...


    Noted: FF 37.0.2 - Transitioning from one tab to the other does not work.. after the first tab displays, the 2nd and 3rd are blanks.... I wont check into this yet since my target browser is just Chrome for now.

    Thanks!

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Link to the fiddle

    Do you have a link to the fiddle to download and test on localhost? Wonder if it has something to do with the css classes...hard to know without testing

    :-)
    I got tired of my stupid username :-)

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Seems to work OK in this Fiddle:
    https://fiddle.sencha.com/#fiddle/m65

    Are you testing locally with a fresh application or are you testing within an existing project?

  5. #4
    Sencha User
    Join Date
    Oct 2007
    Posts
    52
    Answers
    1

    Default

    yup, fiddle works properly.. but if i test it in my local server... then the stretching occurs... ill try setup a local one in a while, just html and javascript... nothing else.. and see if its my server thats making the problem.
    one thing.. i didnt use the cmd builder.. just the old school way of copying the sencha touch javascript file and css folder

    Edit: Here's a torn down version... in a rar archive, hope this helps

    https://www.dropbox.com/s/6u9vu3nr5q...Touch.rar?dl=0

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Works if you set a height

    Same here, has the same issue as your screen grab. If you add this to the CSS:

    Code:
    .x-tabbar.x-docked-top
    padding:10px;
    height:10px;

    ...it works as expected so perhaps you must set a height somewhere to the tabbar. Doesn't explain why it works in Sencha Fiddle though?

    :-)
    I got tired of my stupid username :-)

  7. #6
    Sencha User
    Join Date
    Oct 2007
    Posts
    52
    Answers
    1

    Default

    yes it works with height... but the debugger in me wants to know why this is happening locally but not in jsFiddle ... OC mode on lol
    also.. if you put something in the blank area below... it wont transition properly.

  8. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default This works

    This works for me (I use a separate class):

    Code:
    Ext.define('MyApp.view.MyTabPanel', {
        extend: 'Ext.tab.Panel',
    
    
        requires: [
            'Ext.Container'
        ],
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    title: 'Tab 1',
                    html: 'blah',
                    styleHtmlContent: true
                },
                {
                    xtype: 'container',
                    title: 'Tab 2',
                    html: 'blah',
                    styleHtmlContent: true
                },
                {
                    xtype: 'container',
                    title: 'Tab 3',
                    html: 'blah',
                    styleHtmlContent: true
                }
            ]
        }
    
    
    });
    ;-)
    I got tired of my stupid username :-)

  9. #8
    Sencha User
    Join Date
    Oct 2007
    Posts
    52
    Answers
    1

    Default

    Hmmmm... that can work.. but what I don't get is why it behave's differently if created using the viewport?

  10. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Weird...

    I agree...it's a bit weird. This code also works in fiddle but has the same issue when downloaded. Not sure why...?


    Code:
    Ext.application({
        name : 'Fiddle',
    
    
        launch : function() {
        Ext.create('Ext.TabPanel', {
        fullscreen: true,
        tabBarPosition: 'top',
    
    
        defaults: {
            styleHtmlContent: true
        },
    
    
        items: [
            {
                title: 'Panel 1',
                html: 'Panel One'
            },
            {
                title: 'Panel 2',
                html: 'Panel Two'
            }
        ]
    });
        }
    });
    I got tired of my stupid username :-)

  11. #10
    Sencha User
    Join Date
    Oct 2007
    Posts
    52
    Answers
    1

    Default

    btw.. if you open this in Firefox... it works.... Chrome wont...

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: 22 Sep 2014, 3:46 AM
  2. Replies: 2
    Last Post: 26 May 2014, 6:25 PM
  3. Error when including sencha-touch.js but not sencha-touch-debug.js
    By burrellramone in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 19 Sep 2012, 10:42 AM
  4. sencha touch 2 and sencha chart include error
    By jeanluca in forum Sencha Touch 2.x: Discussion
    Replies: 9
    Last Post: 16 Apr 2012, 4:18 AM

Posting Permissions

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