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'}),
]
}),
....
});
Related
I have a list and each item links to a different page when clicked on using push(). I am pushing them fine but when they do, they don't have the default titlebar or back button that should come with a page pushed on top of the current one. Any ideas? Here is my code:
View being pushed:
Ext.define('myApp.view.Appearances', {
extend: 'Ext.Panel',
xtype: 'Appearances',
config: {
title: '<span class="logo"></span>',
scrollable: 'vertical',
tpl: [
'<h1>Appearances</h1>'
]
}
});
Controller:
this.getMain().push({
xtype: 'Appearances'
});
You need to use NavigationView for that: http://docs.sencha.com/touch/2.1.1/#!/api/Ext.navigation.View
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;.
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
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.
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.