Smartclient: menu aligned right makes page wider - smartclient

I'm using Smartclient, v 8.2 (LGPL).
I have a MenuButton that opens a Menu. The button is aligned right. the problem is that when the menu is displayed; the left side of the menu is aligned with the left side of the button, and there's no space for rendering the menu. As a result, when I click the menu button, the page becomes wider (horizontal scrollbar appears) in order to make space for rendering the menu. when the menu is hidden, the page returns to normal size.
is there any way to avoid this? What I would like is that the right side of the menu is aligned with the right side of the button.
I tried using the align property of the menu, but no matter what value I used, I always see the same behavior. Also I set overflow= "hidden", but still same problem.
this is small test case:
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
overflow: "hidden",
align: "right",
data: [
{title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
{title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
{isSeparator: true},
{title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
{title: "Save As", icon: "icons/16/save_as.png"}
]
});
isc.MenuButton.create({
ID: "menuButton",
autoDraw: false,
title: "File",
width: 100,
menu: menu
});
isc.HLayout.create({
width: "100%",
members: [
isc.Canvas.create({
width: "*",
height: 24,
backgroundColor: "lightgray"
}),
menuButton
]
})

I found the problem: if showShadow is set to true, then I see the issue described in the question. removing that attribute (default is false) solved the problem: menu is aligned to the right, and no scrollbars appear.

Related

How to add a file from manu to a file tree in extjs 4.2?

I have created a toolbar with menu item in it:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
padding: '30 0 0 0',
width : '100%',
items: [
{
xtype: 'splitbutton',
text : 'File',
menu: Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [
{
text: 'Import',
// code here
}
]
})
}
]
});
So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.
Thanks for any help.
I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.
xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true,
It is as simple as it gets. Just create a toolbar and have this code in its item field.

How to align icon in the center of the button in sencha touch?

I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.

how to use existing buttons in vbox panel in sencha touch

After having a look around for how to make a vertical tabbar dock to the right of a panel for ages, it doesn't seem like something it supports. So I am looking for the best way to manually achieve what I want.
I want to use as much core sencha stuff as possible. I've looked at a few things but am currently tinkering with a vbox panel with buttons as the items, with the idea that I add some extra styling to them to make it look more like a tab from a tab panel.
Forgive me for the vague partial code below, but I have been adding and removing various options and have got a little lost. Hopefully it will give you an idea of how I am trying to achieve a right docked vertical tab panel though.
I'd appreciate pointers on how to steer the UI back towards the look of the TabPanel or an alternative.
Thanks in advance
{
xtype: 'panel',
dock: 'right',
width: 120,
height: '100%',
layout: {
type: 'vbox',
align: 'start'
},
ui: 'light',
defaults: {
xtype: 'button',
margin: '10 10 0 0',
iconMask: true,
ui: 'plain',
color: '#fff'
},
items: [
{
text: 'test',
iconCls: 'time',
},
{
text: 'test2',
iconCls: 'time',
}
],
}
Check the source of Ext.TabBar. It extends Ext.Panel and there isn't much magic/code going on.
You might need to tweak the CSS-side as well.
You seem to be on the right track already, though.

Sencha Touch - Tab Panel Layout

Please see the demo: http://jsfiddle.net/JeaffreyGilbert/NGrry/1/
How to make content of tab panel fill the center area? The heading should be on the top, below toolbar.
Expected layout: http://dev.sencha.com/deploy/touch/examples/kitchensink/. I think the Source isn't complete, only the tabPanel itself.
Please help.
Usually to do that sort of layout I've had to nest panels and use empty panels with the flex attribute set to 1.
I adjusted your code to show what I mean http://jsfiddle.net/r9c2M/
For example to center the text 'Home' underneath the toolbar title I changed the first tabpanel item to
{
title: 'Home',
layout: 'vbox',
items: [
{layout: 'hbox',
items: [
{flex: 1},
{html: '<h2>Home</h2>'},
{flex: 1}
]},
{flex: 1}
],
iconCls: 'home',
cls: 'card card1'}
Also the tabpanel should just be an item of the main viewport panel, not a dockedItem. That was messing up the layout too.

Text alignment of Sencha Touch toolbar

How to left align the My Toolbar text through option (not CSS override)?
var myToolbar = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
???
});
Thanks.
You can change the layout of the toolbar
layout: {
pack: 'justify',
align: 'left' // align center is the default
}
This will change the layout of the buttons also (if any). You can control this behavior adding spaces between the title and the buttons. See this article for more details http://www.sencha.com/forum/showthread.php?102989-docked-toolbar-and-button-positioning.-align-attribute-is-ignored.