PDA

View Full Version : Ext.Menu store based list



a3366873
6 Oct 2013, 7:16 AM
Hi,
I'm new to Sencha Touch.
I want to create menu sliding from the left side like in Kitchen Sink UI -> Menus (or facebook app) but I want to place Ext.dataview.List instead of buttons. I tried to modify Kitchen Sink but without success - my menu looks empty, what am I doing wrong?
BTW it would be cool if you add Ext.Menu in docs and Architect.



Ext.define('MyApp.view.Menus', {
extend: 'Ext.Container',
alias: 'widget.menus',

requires: [
'Ext.Menu'
],

config: {
padding: 20,
scrollable: true,
defaults: {
xtype: 'button',
cls: 'demobtn',
margin: '10 0'
},
items: [
{
xtype: 'button',
handler: function(button, event) {
Ext.Viewport.toggleMenu('left');
},
text: 'Toggle left menu'
}
]
},

doSetHidden: function(hidden) {
this.callParent(arguments);

if (hidden) {
Ext.Viewport.removeMenu('left');
} else {
Ext.Viewport.setMenu(this.menuForSide('left'), {
side: 'left',
reveal: true
});
}
},

menuForSide: function(side) {
var items = [{
xtype: 'list',
store: 'MenuItems',
itemTpl: [
'<div>{name}</div>'
]
}];

return Ext.create('Ext.Menu', {
items: items
});

}

});

Kurt001
6 Oct 2013, 10:15 AM
add a height to the list.

a3366873
6 Oct 2013, 11:20 AM
Thanks, after adding width and height my menu works as expected :)