I am trying to build a website for an iphone using sencha touch. I am newbie in sencha and ext.
I would like to have an layout with a header, footer and inner content. It can be understand as masterpage with header & footer which will be used on each page.
Header and footer should be scrollable (not docked!) and I would like to have an animation between pages.
Generally the website will have a home with header, menu and footer. If user clicks some button from menu (i.e. 'ABOUT') the page should slide to the right to 'ABOUT' page. This page will have a header, some content, back button and footer. Header & footer will look the same as on home page.
I've seen many solutions with docked header and footer but I haven't found any which works in the way I want (the problem is that I want header and footer to be scrollable).
I have tried to use a card layout panel nested in vbox panel, I have tried also card layout panel nested in fit layout panel nested in vbox panel (please find below the sample code).
//home, video and contact panels are quite similar to about panel
about = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'start'
},
items: [
{
html: ['<div class="pageWrapper"><h1><span>About</span></h1></div>']
}
] // end items
});
cardPanel = new Ext.Panel({
layout: 'card',
items: [home, about, video, contact]
});
cardWrapper = new Ext.Panel({
layout: 'fit',
items: [cardPanel]
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardWrapper, btnBack, footer]
});
When I use above code the cardWrapper has height=0 and width=0. I can only see the home page when I set height & width of cardWrapper to some value. I have also tried to set:
autoHeight: true
For home panel, cardPanel and cardWrapper and had no luck :/
Do you have any other ideas how can I achieve this layout of the website?
First, you can have an internally scrollable header and footer when docked. I've done it before where a toolbar that is docked to the main view, but can still be scrolled horizontally. All you have to do is set the scroll property of the toolbar.
Second, setting the 'flex' property of the cardPanel to 1, and giving a fixed height (or a flex as well) to header & footer may resolve the issue you are seeing.
So:
var cardPanel = new Ext.Panel({
flex: 1,
layout: 'card',
items: [home, about, video, contact]
});
var header = new Ext.Panel({
height: 100,
html: "<h1>Header</h1>"
});
var footer = new Ext.Panel({
height: 100,
html: "<h1>Footer</h1>"
});
var mainPanel = new Ext.Panel({
layout: 'vbox',
scroll: 'vertical',
fullscreen: true,
items: [header, cardPanel, btnBack, footer]
});
Finally, what you could try is turn the cardPanel into a Carousel. You can turn off the indicator on the object with the property 'indicator'. To switch between the cards you would use the same setActiveItem call.
Related
ExtJS 4.1.1.
I have a panel with layout: { type: 'vbox', align: 'stretch' }. Inside it is a container with layout of {type: 'anchor', anchor: '100% 100%'} and flex: 3. Inside the container is a plain panel (containing HTML) with autoScroll: true.
Scrolling from the UI works fine. However, a call to scrollIntoView passing in the Element for the div that results has no effect.
I note that the div does has overflow-x/y: auto. However, it has a height attribute of a giant number (2241px), which I suspect is at the root of this issue.
What's going on?
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.
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.
I'm new to sencha-touch and I have worked through all panel and layout tutorials; however, I still can't figure out how to fit three different carousel cards into a single panel. I have seen this kind of layout in some of the native apps and I was wondering if this can be done using sencha-touch
You might be able to achieve a similar effect by using styled Panels within each carousel pane. You would only be able to scroll in batches of 3 at a time. The dots at the bottom would only show the total of 3 panel panes though. Something like:
var carousel = new Ext.Carousel({
items: [
new Ext.Panel({
layout: 'hbox',
items:[
new Ext.Panel({html: 'card 1'}),
new Ext.Panel({html: 'card 2'}),
new Ext.Panel({html: 'card 3'}),
]
}),
new Ext.Panel({
layout: 'hbox',
items:[
new Ext.Panel({html: 'card 4'}),
new Ext.Panel({html: 'card 5'}),
new Ext.Panel({html: 'card 6'}),
]
}),
....
});
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.