Creating Side Menu for native mobile app

[Anameus]

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/

[Anameus]

Anyone??

[dsn2012]

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'
}
]
}
]
}
]
}


});

[Anameus]

Thanks i'll try it, and update my progress

[yimingliu]

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?

[dsn2012]

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.