PDA

View Full Version : Need help with menu items



gskluzacek
27 Feb 2011, 3:23 PM
I am trying to use Designer to create a menu that has a TextItem and a ComboBox, while I can get it to do it, it doesn't look very nice. Instead of the TextItem and the ComboBox displaying to the right of the vertical separator line, they are displayed flush to the left edge of the menu.

I've found the iconCls config, and see by setting it to 'no-icon' I achieve my desired affect, sort of. Problem is that Designer doesn't support setting this config directly on the ComboBox or the TextItem objcts.



Ext.onReady(function() {
Ext.QuickTips.init();

//
// main window object
//
var mywin = new Ext.Window({
title: 'My Window',
width: 500,
height: 450,
x: 10,
y: 40,
padding: '5 5 5 5',
autoScroll: true,
//
// the tool bar
//
bbar: {
xtype: 'toolbar',
buttonAlign: 'right',
items: [{
xtype: 'button',
text: 'Menu 1',
//
// first menu - how it should look ideally
//
menu: {
xtype: 'menu',
id: 'myMenu1',
items: [{
xtype: 'menuitem',
text: 'dummy menu item 1'
},{
xtype: 'menuitem',
text: 'dummy menu item 2'
},{
xtype: 'menuseparator'
},{
//
// Instead of this being a TextItem
// I have used a Menu Item
//
xtype: 'menuitem',
text: '<i>Text Item here</i>',
// ### set canActivate to false so doesn't ###
// ### highlight when user mouses over it ###
canActivate: false,
// ### set hideOnClick to false so the ###
// ### menu isn't hidden when the user ###
// ### clicks on the menut item ###
hideOnClick: false
}]
}
},{
xtype: 'button',
text: 'Menu 2',
menu: {
xtype: 'menu',
id: 'myMenu2',
//
// second menue - positioning is correct
// but the spacing is off for the TextItem
//
items: [{
xtype: 'menuitem',
text: 'dummy menu item 1'
},{
xtype: 'menuitem',
text: 'dummy menu item 2'
},{
xtype: 'menuseparator'
},{
// ### using a menu text item here ###
xtype: 'menutextitem',
text: '<i>Text Item here</i>',
// ### in order to get it to position ###
// ### correctly, need to add the ###
// ### iconCls config ###
iconCls: 'no-icon'
},{
xtype: 'combo',
width: 135,
// ### in order to get it to position ###
// ### correctly, need to add the ###
// ### iconCls config ###
iconCls: 'no-icon'
}]
}
},{
xtype: 'button',
text: 'Menu 3',
menu: {
xtype: 'menu',
id: 'myMenu3',
//
// third menu - ComboBox and TextItem are
// both positioned incorrectly and the spacing
// is off on the TextItem
//
items: [{
xtype: 'menuitem',
text: 'dummy menu item 1'
},{
xtype: 'menuitem',
text: 'dummy menu item 2'
},{
xtype: 'menuseparator'
},{
xtype: 'menutextitem',
text: '<i>Text Item here</i>',
// ### cannot use the iconCls config ###
// ### on the TextItem - Designer ###
// ### does not allow you to add it ###
},{
xtype: 'combo',
width: 135,
// ### cannot use the iconCls config ###
// ### on the TextItem - Designer ###
// ### does not allow you to add it ###
}]
}
}]
}
});

Ext.getCmp('myMenu1').add(new Ext.form.ComboBox({
width: 135,
iconCls: 'no-icon'
}));

mywin.show();

});


I've put together some code that demonstrates my issue (http://ccbdb.com/menuissue/) The 3rd menu demonstrates how the menu looks when created in Designer.

Also, is there any practical use of the TextItem, if it looks so out of place in a menu?

Here are some screen shots:
http://ccbdb.com/menuissue/menu1.png
http://ccbdb.com/menuissue/menu2.png
http://ccbdb.com/menuissue/menu3.png