1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Vote Rating
    0
    Anameus is on a distinguished road

      0  

    Default Unanswered: Creating Side Menu for native mobile app

    Unanswered: Creating Side Menu for native mobile app


    Hi
    Do you know if possible to create with Sencha Touch a side menu like this:
    http://www.hongkiat.com/blog/buildin...n-with-jquery/

  2. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Vote Rating
    0
    Anameus is on a distinguished road

      0  

    Default


    Anyone??

  3. #3
    Sencha User
    Join Date
    May 2012
    Location
    India
    Posts
    11
    Vote Rating
    0
    dsn2012 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Anameus View Post
    Anyone??
    Hi Anameus,

    It's definitely possible.

    The code would be something similar to below :

    Ext.define('TestApp.view.Main', {
    extend: 'Ext.Panel'


    config: {
    layout: {
    type: 'hbox'
    },
    items: [
    {
    xtype: 'list',
    flex: 1,
    border: 1,
    itemId: 'sidemenu',
    itemTpl: [
    '<div>{navItem}</div>'
    ],
    store: 'navstore',
    items: [
    {
    xtype: 'titlebar',
    docked: 'top',
    title : 'Menu Links'
    }
    ]
    },
    {
    xtype: 'container',
    flex: 7,
    itemId: 'content-view',
    layout: {
    type: 'card'
    },
    items: [
    {
    xtype: 'titlebar',
    docked: 'top',
    title : 'HK Mobile'
    items: [
    {
    xtype: 'button',
    flex: 0.5,
    itemId: 'btnsideshowhide'
    }
    ]
    }
    ]
    }
    ]
    }


    });

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Vote Rating
    0
    Anameus is on a distinguished road

      0  

    Default


    Thanks i'll try it, and update my progress

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
    yimingliu is on a distinguished road

      0  

    Default


    I try it. It looks like side menu.

    screenshot.jpg


    It is always expand and cannot collapse.

    Do you have any idea to make collapsible?

  6. #6
    Sencha User
    Join Date
    May 2012
    Location
    India
    Posts
    11
    Vote Rating
    0
    dsn2012 is on a distinguished road

      0  

    Default


    Quote Originally Posted by yimingliu View Post
    I try it. It looks like side menu.

    Attachment 40129


    It is always expand and cannot collapse.

    Do you have any idea to make collapsible?

    The button (itemId: 'btnsideshowhide') could be used as a toggle button to show/hide the side panel. You could capture the tap event for the button and write the code to first hide the side panel(collapse) and again on its click display the side panel again(expand).

    Hope it helps.

Thread Participants: 2