Results 1 to 10 of 13

Thread: Sencha Touch 2.4.1 Layout Error

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    51
    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!

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
  •