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.
Related
I'm using Sencha Touch 2. I would like to use an Icon included in the Framework.
At the moment I'm using this code, but I have some glitch with the image being displayed, the transparency seems lost.
I would like to know if his is a proper way how to implement it thanks
items: [{
xtype: 'button',
icon: 'resources/themes/images/default/pictos/settings9.png',
ui: 'normal',
itemId: 'settingsButton',
align: 'right'
}]
I suggest you refer to the answer to this question to learn how to use icons in tabbars :
Icon for sencha touch tabpanel tabs
Hope this helps
How to have 2 lists in one single panel in sencha touch 2?
I can see the first list if i use
layout:'card'
I tried :
layout: {
type: 'vbox',
align: 'stretch'
}
Please let me know how can i have 2 lists inside the same panel.
You need to use the flex config on each of your list.
You can see and example below here : Sencha Fiddle
Hope it helps
create panel with vbox layout inside it create two panel with fit layout and put every list into respective panle
try this method
Hi #Akshatha you can try this into your Ext.Panel,
...
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'list',
width: '40%',
flex: 1,
styleHtmlContent: true,
...
},
{
xtype: 'list',
width: '60%',
flex: 0.5,
styleHtmlContent: true,
...
},
]
...
You can define the width of Panel and you have Ext.List.
I hope help you. :)
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.
I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:
The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.
(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)
What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?
This is my js:
Ext.setup({
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
cls: 'tab1',
html: 'Tab 1'
},
{
cls: 'tab2',
html: 'Tab 2'
},
{
cls: 'tab3',
html: 'Tab 3'
},
{
cls: 'tab4',
html: 'Tab 4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});
EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.
Couple of possibilities here:
The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:
new Ext.Panel({
layout: 'fit',
items: carousel
});
This could be related to a similar and slightly obscure issue we'd seen in 1.x. Try this:
Open resources/scss/application.scss and move line 23 (#include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
run compass compile to recompile your SASS
If it's the same issue as I saw a while back (no guarantee that it is), this will fix it
I've tried adding style: float: right to the button but it isn't working.
myapp.cards.home.add({
xtype: 'button',
id: 'previmagebutton',
// text: 'p',
iconCls: 'arrow_left',
iconMask: true,
style: 'float: right'
});
myapp.cards.home = new Ext.Panel({
scroll: 'vertical',
id: "home-card",
layout:{
type:"vbox",
align:"center"
},
items: [header]
});
myapp.mainPanel = new Ext.Panel({
fullscreen: true,
layout: "card",
cardAnimation: 'slide',
items: [myapp.cards.home]
});
I have to use the add method if that is what's causing the problem. Many thanks.
In your myapp.cards.home object you have the layout set up to align:"center".
I've succeeded in creating a floating button by using
floating:true
config on the button. It is a private member, so I'm still looking for an official way.
This should work ::
layout : {
type : 'vbox',
align : 'left'
}
or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need