PDA

View Full Version : align one menu button right



DaveC426913
10 Aug 2011, 12:09 PM
I know this has been exampled many times but there are fifty ways to build a menu, so 49 of them won't work depending on how it's set up.

I want my userName and SignOut buttons pushed all the way to the right. I've tried gving them classes and ids and !important styles. None of it works. The menuContainer is indeed full width, but my buttnos always seems to have some auto-styling that keeps them flush left.

27429

This is how the menu buttons are built:

RM.menus = [{
id: 'user_menu_manage_users',
iconCls: 'group',
text: 'Users',
handler: function(){
Ext.History.add('usermgr');
}
},{
id: 'recipe_menu_manage_recipes',
iconCls: 'cake',
text: 'Recipes',
handler: function(){
Ext.History.add('recipemgr');
}
},{
id: 'product_menu_manage_products',
iconCls: 'brick',
text: 'Products',
handler: function(){
Ext.History.add('productmgr');
}
},{
id: 'client_menu_manage_clients',
iconCls: 'chart_organisation',
text: 'Clients',
handler: function(){
Ext.History.add('clientmgr');
}
},{
id: 'store_menu_manage_stores',
iconCls: 'map',
text: 'Stores',
handler: function(){
Ext.History.add('storemgr');
}
}];

RM.signOutButtonCfg = {
xtype: 'button',
iconCls: 'door_in',
cls: 'menu_float_right',
text: 'Sign Out',
handler: function(){
window.location.href = '/auth/logout';
}
};
RM.userName = {
xtype: 'label',
cls: 'menu_float_right',
text: 'username',
};
RM.spacer = {
xtype: 'tbspacer',
};

Some stylin'. (I've tried combos of relative/absolute positioning, with right:0, etc.)


.menu_float_right{
float:right;
border:1px solid red;
}


And this is where they're added:

populateMenus: function(){
var menuContainer = Ext.getCmp('menuContainer');
if (menuItems.length > 0){
menuContainer.add(menuItems);
}
//menuContainer.add(RM.spacer);
menuContainer.add(RM.userName);
menuContainer.add(RM.signOutButtonCfg);
menuContainer.doLayout();

},

Here's how menuContainer is built:

xtype: 'container',
layout: 'hbox',
id: 'menuContainer',
defaults: {
margins: {
top: 0,
right: 5,
bottom: 0,
left: 5
},
scope: this
},
items: []


Here is the HTML that ends up being produced:

<div id="menuContainer" style="width: 1186px;" class=" x-box-layout-ct">
<div class="x-box-inner" id="ext-gen19" style="width: 1186px; height: 24px;">
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="client_menu_manage_clients" style="width: auto; left: 5px; top: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen108" class=" x-btn-text chart_organisation">Clients</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="recipe_menu_manage_recipes" style="width: auto; left: 73px; top: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen109" class=" x-btn-text cake">Recipes</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="store_menu_manage_stores" style="width: auto; left: 148px; top: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen110" class=" x-btn-text map">Stores</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="user_menu_manage_users" style="width: auto; left: 216px; top: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen111" class=" x-btn-text group">Users</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table><label id="ext-comp-1023" class=" menu_float_right x-box-item" style="left: 281px; top: 0px;">username</label>
<table cellspacing="0" class="x-btn menu_float_right x-btn-text-icon x-box-item" id="ext-comp-1024" style="width: auto; left: 346px; top: 0px;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen112" class=" x-btn-text door_in">Sign Out</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
</div>
</div>

wickedsheep
10 Aug 2011, 1:42 PM
var pnl = new Ext.Panel({
xtype: 'panel',
title: 'My Panel',
width: 400,
height: 250,
bbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Clients'
},
{
xtype: 'button',
text: 'Recepies'
},
{
xtype: 'button',
text: 'Stores'
},
{
xtype: 'button',
text: 'Users'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Sign out'
}
]
}
});


Not the tbfill (Toolbar.Fill) component.

DaveC426913
11 Aug 2011, 6:22 AM
Hm well, that didn't work.

I changed the xtype from 'container' to 'toolbar', (which has caused my buttons to look like labels until I rollover them, but I'll figure that out later.)

Then I made this:

RM.filler = {
xtype: 'tbfill',
};

then did this:

var menuContainer = Ext.getCmp('menuContainer');
if (menuItems.length > 0){
menuContainer.add(menuItems);
}
menuContainer.add(RM.filler);
menuContainer.add(RM.userName);
menuContainer.add(RM.signOutButtonCfg);
menuContainer.doLayout();

but something has gone terribly wrong. The moment I add that filler, my menu disappears. It shrinks vertically and there are no visible elements on it at all.


Here's the HTML. You can see that the tbfill and everything after it are gone:


<div class="x-toolbar x-small-editor x-box-layout-ct" id="menuContainer" style="width: 1900px;">
<div class="x-box-inner" id="ext-gen19" style="width: 1900px;">
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="recipe_menu_manage_recipes" style="width: auto;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen108" class=" x-btn-text cake">Recipes</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="store_menu_manage_stores" style="width: auto;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen109" class=" x-btn-text map">Stores</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
<table cellspacing="0" class="x-btn x-btn-text-icon x-box-item" id="user_menu_manage_users" style="width: auto;"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em unselectable="on" class=""><button type="button" id="ext-gen110" class=" x-btn-text group">Users</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
</div>
</div>

DaveC426913
11 Aug 2011, 7:45 AM
Found the solution: remove layout:'hbox'

ateller101
10 Oct 2011, 1:16 PM
Hi all, I'm new to Sencha Touch as of today and I thought I would join the forum.

Anyway, I too ran into similar issue where I wanted the button flushed right.

The code below seemed to work for me, hopefully it will work for others as well.

I basically removed 2 out of the three "show" buttons from the example "overlay" code, leaving only the "show (centered)" since I wanted the overlay content to take up center screen. I then added an xtype 'spacer' element in as the first item.

This had the effect of flushing the button all the way right on both Google Chrome browser and Apple iPhone 4


var dockedItems = [{
dock: 'bottom',
xtype: 'toolbar',

items: [{

xtype : 'spacer' }, {
text : 'show (centered)',
handler: showCenteredOverlay

}]
}];


Cheers,
Adam