//here is my carousel view which display some images on carousel code is below
Ext.define("App.view.GView",
{
extend:'Ext.Carousel',
xtype:'GView',
requires:[
'Ext.carousel.Carousel',
'Ext.Img',
'Ext.Loader'
],
config:{
title:'XYZ',
iconCls:'home',
layout:{
type:'vbox',
pack:'center',
align:'center'
},
directionLock:true,
fullscreen:true,
items:[
{
docked:'top',
xtype:'titlebar',
cls:'titleBar',
title:'Gallery'
}
],
xtype:'carousel',
id:'gallerycarousel'
}
});
//Here is my controller code which binds data to
var items = []; Temp array
var xyz= [{ urlL}] My image array
Ext.each(images, function (picture) {
items.push({
xtype: 'image',
cls: 'centerImage',
src: picture.url
});
});
floorCarousel.setItems(items);
floorCarousel.setActiveItem(0);
//My question is to how to add another carousel on the top this carousel that when i move first carousel item than second carousel item also should move and vice verse.. So first carousel is at bottom on top of that i need small size carousel Please help me out little tricky .,,
I'm confused. do you need to know how to create the carousel, or do you just need to know how to make the 2nd carousel move with the main carousel?
Related
I have just like website, side menu. which is different menu items, I want to display if click one tab then display related information in the next view. if again click next button display in same view. only change button view is same.
Here more clear of these images.
How to do this in sencha, I am very new in sencha. Thank you advance.
You will want to use a Card layout for the main body. See the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card
For the side navigation, you can use simple components that change the active item of the card layout using listeners on the elements of the components (for example, use singletap event for the element: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap).
items: [{
items: [
{
html: 'Student',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(1);
}
}
}
},
{
html: 'Teacher',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(2);
}
}
}
}
]
},
{
id: 'myCardLayout',
layout: 'card',
items: [
{
//student panel
},
{
//teacher panel
}
]
}]
Note that this is pretty sloppy code (it is not MVC, it uses Ext.getCmp, etc), but it is just intended to give you the concept of what should work for you here.
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
When pushing new View, this view slides from left to right. But Navigation View elements (title, buttons) slide from right to left.
I'd like to achieve same effect as pressed Back button has.
Here is the code I'm using for sliding the Views:
navigationView.animateActiveItem(view, {
type: 'slide',
direction: 'right'
});
navigationView.push(view);
Thanks for help in advance.
You need to set the animation you want to use direction on the Ext.navigation.View:
Ext.create('Ext.navigation.View', {
fullscreen : true,
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'right'
}
}
});
Demo
Hope this helps
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.
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.