I want to change the header's height of Accordion, I use a css to set the header's height.
#panel1 .x-accordion-hd{ height: 40px;}
The height is changed but the content of the panel is covered by the header and when the panel is collapsed the next header will cover part of the previous header. Here is the picture.
Any help will be appreciated.
You can put a container inside your accordion panel and set the padding with in the container
items: [{
title: 'Panel 1',
items:[{
xtype:'container',
padding:'25px 0 0 0',
html:'panel content'
}]
},{
title:'Panel 2',
items:[{
xtype:'container',
padding:'25px 0 0 0',
html:'panel content'
}]
}]
that's a good idea, and I also find a another solution in http://ext4all.com/post/how-to-change-the-header-s-height-of-accordion, thank you!
Related
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
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.
Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??
My Code :
var bottomCar=new Ext.Panel({
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
flex:1
},
items: [bottomCar0,bottomCar1,bottomCar2]
});
how can i change the defaults??
Thnaks
Sneha
The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.
Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.
What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.
You can set inside the defaults the height and width, if all of them will get the same values
defaults:{
height: 200,
width: 300
}
or set to each item its height and width
items: [
{
title: 'Home',
iconCls: 'home',
height: 200,
width: 300
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen',
height: 100,
width: 150
}
]
More on Flex
Shlomi.
OR you can add "cls" to your panel and adjust it in css file.
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.