1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    7
    Vote Rating
    0
    mniktw is on a distinguished road

      0  

    Default Answered: missing contentEl by using the Sencha Touch 2.0 RC2

    Answered: missing contentEl by using the Sencha Touch 2.0 RC2


    Well ...
    Sencha touch 2.0 rc2 version in use.
    What I want you sencha touch rc2 version of the base frame, and use
    The content is written in html.
    Tabpanel now generate a 5, but does not work properly.

    Had some problems.
    contentEl: 'show-div' option in the html element you can not scroll.
    So, in the panel scrollable: true option,
    does not show the contents of the div.
    Is a bug?
    Below is the html configuration.

    index.html
    Code:
    <div id="content1">
    / / HTML content into the configuration .. content1
    </div>
    
    <div id="content2">
    / / HTML content into the configuration .. content2
    </div>
    
    <div id="content3">
    / / HTML content into the configuration .. content3
    </div>
    
    <div id="content4">
    / / HTML content into the configuration .. content4
    </div>
    
    <div id="content5">
    / / HTML content into the configuration .. content5
    </div>
    Code:
    index.tabpanel = Ext.create ('Ext.tab.Panel', {
    fullscreen: true,
    id: 'index_view',
    tabBarPosition: 'bottom',
    scrollable: true,
    items: [
    {
    iconCls: 'star',
    title: 'region',
    items: [
    index.toolbar [0],
    {
    xtype: 'panel',
    id: 'content1u',
    styleHtmlContent: true,
    contentEl: 'content1',
    }
    ]
    },
    {
    iconCls: 'team',
    title: 'by party',
    items: [
    index.toolbar [1],
    {
    xtype: 'panel',
    id: 'content2u',
    styleHtmlContent: true,
    contentEl: 'content2'
    }
    ]
    },
    {
    iconCls: 'search',
    title: 'Election Schedule'
    items: [
    index.toolbar [2],
    {
    xtype: 'panel',
    id: 'content3u',
    styleHtmlContent: true,
    contentEl: 'content3'
    }
    ]
    },
    {
    iconCls: 'download',
    title: 'News',
    items: [
    index.toolbar [3],
    {
    xtype: 'panel',
    id: 'content4u',
    styleHtmlContent: true,
    contentEl: 'content4'
    }
    ]
    },
    {
    iconCls: 'info',
    title: 'About',
    items: [
    index.toolbar [4],
    {
    xtype: 'panel',
    id: 'content5u',
    styleHtmlContent: true,
    contentEl: 'content5'
    }
    ]
    }
    ]
    });
    Last edited by mitchellsimoens; 1 Mar 2012 at 6:22 AM. Reason: fix HTML to be valid

  2. Try this tabpanel:

    Code:
    var tabpanel = Ext.create ('Ext.tab.Panel', {
        fullscreen     : true,
        tabBarPosition : 'bottom',
        defaults       : {
            scrollable       : true,
            styleHtmlContent : true
        },
        items          : [
            {
                iconCls    : 'star',
                title      : 'region',
                contentEl  : 'content1',
                items      : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'team',
                title     : 'by party',
                contentEl : 'content2',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'search',
                title     : 'Election Schedule',
                contentEl : 'content3',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'download',
                title     : 'News',
                contentEl : 'content4',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'info',
                title     : 'About',
                contentEl : 'content5',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            }
        ]
    });
    I did a couple things. First I put the contentEl on the direct child of the tabpanel as you didn't need to nest a panel within to accomplish this. Also added some static toolbars as I didn't have anything for the index.toolbar array.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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 this tabpanel:

    Code:
    var tabpanel = Ext.create ('Ext.tab.Panel', {
        fullscreen     : true,
        tabBarPosition : 'bottom',
        defaults       : {
            scrollable       : true,
            styleHtmlContent : true
        },
        items          : [
            {
                iconCls    : 'star',
                title      : 'region',
                contentEl  : 'content1',
                items      : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'team',
                title     : 'by party',
                contentEl : 'content2',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'search',
                title     : 'Election Schedule',
                contentEl : 'content3',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'download',
                title     : 'News',
                contentEl : 'content4',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            },
            {
                iconCls   : 'info',
                title     : 'About',
                contentEl : 'content5',
                items     : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top'
                    }
                ]
            }
        ]
    });
    I did a couple things. First I put the contentEl on the direct child of the tabpanel as you didn't need to nest a panel within to accomplish this. Also added some static toolbars as I didn't have anything for the index.toolbar array.
    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.

  4. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    7
    Vote Rating
    0
    mniktw is on a distinguished road

      0  

    Default thank you.

    thank you.


    Thank you.
    With the help of you were able to solve the problem.

Thread Participants: 1

Tags for this Thread