PDA

View Full Version : Popup menu in toolbar



wakatanka
29 Jun 2010, 5:14 AM
Hi, i'm a newbbie :) fallen in love with sencha...
I'm trying to make an app with a popup menu in the toolbar, based on a demo in kitchensink.

here is my code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var tapHandler = function(button, event) {
var txt = "User tapped the '" + button.text + "' button.";
Ext.getCmp('toolbartxt').update(txt);
};

var buttonsGroup1 = [{
text: 'Back',
ui: 'back',
handler: tapHandler
}];

var buttonsGroup2 = [{
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: 'Option 1',
handler: tapHandler
},
{
text: 'Option 2',
handler: tapHandler
}]
}];

var formBase = {
xtype: 'select',
scroll: 'vertical',
name: 'options',
dock: 'top',
ui: 'light',

options: [
{
text: 'This is just a big select',
value: '1'
},
{
text: '2',
value: '2'
}
]
handler: tapHandler

};

if (Ext.platform.isTablet) {
buttonsGroup1.push({
xtype: 'spacer'
});
buttonsGroup2.push({
xtype: 'spacer'
});

var dockedItems = [{
xtype: 'toolbar',
// dock this toolbar at the bottom
ui: 'dark',
dock: 'top',
items: buttonsGroup1.concat(formBase)
},
{
xtype: 'toolbar',
// dock this toolbar at the bottom
ui: 'dark',
dock: 'bottom',
items: buttonsGroup1.concat(buttonsGroup2),
}];
}
else {
var dockedItems = [{
xtype: 'toolbar',
ui: 'light',
items: formBase,
dock: 'top'
},
{
xtype: 'toolbar',
ui: 'dark',
items: buttonsGroup2,
dock: 'top'
}];
}


new Ext.Panel({
id: 'toolbartxt',
html: 'Pick a button, any button. <br /><small>By using SASS, all of the buttons on this screen can be restyled dynamically. The only images used are masks.</small>',
fullscreen: true,
dockedItems: dockedItems
});

var data = ['Code Igniter', 'Cake Php', 'Symfony', 'Zend'];

}
// fine onready
});

but it doesn't work :(
someone can help me??

thanks so much