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.
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 am working on an MVC app in Sencha Touch 2 and am having trouble getting a list to display in a nested panel.
The structure of the app has a main view which is a tab panel. One of the items in the tab panel is a defined panel, xtype: 'homepanel'.
An item in this panel is the list xtype: 'newslist' that is linked to the appropriate store and model files.
The list does not display unless I change its parent homepanel to a type, Ext.navigation.View.
What am I missing in the definition of homepanel' as a panel that prevents the display of the list?
Ext.define('ACSO.view.Home', {
extend: 'Ext.Panel', //<--works if Ext.navigation.View
xtype: 'homepanel',
requires: [
'Ext.TitleBar',
'ACSO.view.NewsList'
],
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
styleHtmlContent: true,
items: [{
xtype: 'newslist'
}]
}
});
Your Panel has no layout.
I suggest you try to add the following in your panel config:
layout:'fit'
Hope this helps
Try adding layout: 'card' to your panel's config
Layout: fit didn't work out for me.
However, adding layout: 'card to the parent Ext.Panel worked!
The UI component which is within the Ext.Panel is no longer hidden via the display: none !important;.
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.
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
So I have a TabPanel defined like so:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, faq, about]
});
The home section is defined like so:
home = new Ext.Component({
title: "Home",
scroll: 'vertical',
tpl: [
'<tpl for="."',
' <div messageId="{message_id}">',
' </div>',
'</tpl>'
]
});
Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.
How can I add them so that the content section still acts the same way and doesn't start until underneath these added elements?
It's not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your 'home' card as below.... If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.
home = new Ext.Panel({
title: "Home",
scroll: 'vertical',
items: [
{
html: 'first panel'
},
{
tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
}
]
});
Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.