Why I am not getting a slide-effect when page is changing? here is my code
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'card',
fullscreen: true,
items: [
{
html: "Splash Screen<img src='images/logo.png' />"
},
{
html: "Login Screen<img src='images/logo.png' />"
},
{
html: "About Screen"
},
{
html: "User Screen"
}
]
});
panel.setActiveItem(0);
setTimeout(function(){
panel.setActiveItem(1);
},3000);
After 3 seconds I am getting login screen but without any slide animation. I checked both in chrome and ipad-simulator.
setActiveItem() doesn't show animations in ST2. You need to replace it with
panel.animateActiveItem(1, {type:'slide', direction:'left'});
Try something like this inside your setTimeout:
panel.setActiveItem(1, {type:'slide', direction:'left'});
I believe you can also change your [layout: 'card'] line to something like this to achieve the same effect:
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
}
If you are using Sencha Touch 2.0.0 and new version than use this,
yourpanel.animateActiveItem(0, { type: 'slide', direction: 'right' })
Please go through this link for more information.
http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Container
Related
I'm following through this sencha touch tutorial, however, I could not get tap event to fire, I've tried with and with out using id to get a reference..but no luck..here is my code..
View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
xtype: "NotesListView",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items:[{
xtype: "spacer",
}, {
xtype: "button",
text: "New",
ui: "action",
action: "addNote",
id: "new-note-btn"
}]
}]
}
});
Controller:
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
notesListView: 'NotesListView',
newNoteBtn: 'notesListView button[action=addNote]'
},
control: {
tap: "onNewNote"
}
},
onNewNote: function(){
console.log("New button has been tapped!!");
},
launch: function() {
this.callParent();
console.log("Launch in Notes.js");
},
init: function(){
this.callParent();
console.log("Init in Notes.js");
}
});
I couldn't workout what I'm missing..when I tap on the New button in the toolbar, no event seems to be firing as theres nothing in the console logs. I've tried Safari, Chrome and Firefox..no joy..Could you please take a quick look and see if could find what I'm missing? Is there a way to debug Sencha Touch apps?
Try to use:
newNoteBtn: 'button[action=addNote]'
or:
newNoteBtn: '#new-note-btn'
instead of:
newNoteBtn: 'notesListView button[action=addNote]'
I'm a newbie to SenchaTouch. I have started working on an App and the results are this until now: http://mobz.com.br:86. (based on the Sencha-Touch-tabs-and-toolbars-demo)
Now I started playing with it and I have difficulties to set things strait in my head.
I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.
I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.
The Problem
As you can see in my app, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.
It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.
But if I load the second panel first, when the page loads, it loads without any UI issues.
My Code
First I declare my ViewPort
Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'destaques', id: 'home' },
{ xtype: 'ingressos' },
{ xtype: 'mobilizacoes' },
{ xtype: 'locais' },
{ xtype: 'minhaconta' }
]
});
Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Than after, at the ingressos.js file, I define the tab.
First I got the panel that will load the items into it.
Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
id: "ingressos",
title: "Ingressos", //title of the page
iconCls: "arrow_right", // icon of the tab at the bottom
styleHtmlContent: true,
fullscreen: true,
layout: 'card',
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos"
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('ingressos', Mobz.views.Ingressos);
This is the initial item that load into the panel.
Mobz.views.IngressosList = new Ext.List({
id: 'ingressoslist',
itemTpl: IngressosList_Template,
store: Mobz.stores.IngressosStore,
onItemTap: function (subIdx) {
//Mobz.views.IngressoCinemaList.update(subIdx);
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
}
});
And that's the second panel.
The panel where the first panel goes to.
Mobz.views.IngressoTitle = new Ext.Panel({
id: 'ingressotitle',
tpl: IngressoTitle_Template,
data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
id: 'ingressocinemalist',
itemTpl: IngressoCinemaList_Template,
store: Mobz.stores.IngressoCinemaListStore,
flex: 1, grouped: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
}
}]
}
],
onItemDisclosure: function () {
app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
}
});
Mobz.views.Ingresso = new Ext.Panel({
id: 'ingresso',
layout: {
type: 'vbox',
align: 'fit'
},
items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});
That's it.
I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.
Shlomi.
First, you must understand the logic about the panels.
You have an TabPanel and you have 5 panel in it. If you run your code when you click a ticket as you described in problem, your code added a new pane to TabPanel. But you need to set active item of Ingression panel(second panel which is in tabPanel).
Now start the solution;
The second tab has a panel(I will say senchaTabItem) whose layout is card layout. And this panel has a panel in it with list of Ingressos. We want to remove this panel and replace the new panel so we should not call the tabPanel's method, we must call to senchaTabItem's method.
So if you replace below code
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
with working code(below code).
Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
In your site; it is at line 170 in ingressos.js
I tried and it works, I hope it helps
I'm writing a Sencha Touch 1.1 MVC app.
My view code looks like this
MyApp.views.MainIndexView = Ext.extend(Ext.TabPanel, {
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
initComponent: function() {
this.topToolbar = new Ext.Toolbar({
title: 'My App'
})
this.temperatureTab = new Ext.Panel({
title: 'Temperature',
html: '<h1>Log A Temperature</h1>'
})
this.dockedItems = [this.topToolbar];
this.items = [this.temperatureTab];
this.tabBar = {
dock: 'bottom',
layout: {
pack: 'center'
}
}
MyApp.views.MainIndexView.superclass.initComponent.call(this);
}
})
The view renders, but the tabBar at the bottom is super small. It makes no sense.
Is there a way to make this normal height without adding icons?
Adding icons was the only way that I found to fix this.
I am having a very hard time understanding why i can't go back to the previous panel within my application. Enough talk, some code
appsDetails = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'verticall',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
ui: 'back',
scope: 'this',
handler: function() {
console.log(this.ownerCt) //This returns "undefined"
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: description,
data: this.record.data
}];
appsDetails.superclass.initComponent.call(this);
}
});
I am getting to this view above by using this code below in the previous panel
selection: function(list, index) {
if (index[0] !== undefined) {
var details = new appsDetails({
homeCard: this.appsPanel,
record: index[0],
});
this.setActiveItem(details, {type: 'slide', direction: 'left'})
}
}
I have no problem getting to the desired panel but i can't come back the previous one.
Thx for your help
You are passing a string object with value 'this'. Change this line: scope:'this' in scope:this
I have a panel inside a panel as an item, along with other docked items.
For some reason it is not showing up.
These are stuffs to add to main panel:
MarketMakerApp.views.businessInfo = new Ext.Panel({
id: 'businessInfo',
layout: 'fit',
html: '<br /><br /><br /><div>{ id } </div>' + '<div>{ title }</div>'
//html: 'This is the business info view'
});
MarketMakerApp.views.businessTabbar = new Ext.TabBar({
dock: 'bottom',
ui: 'dark',
items: [
{
text: '1',
iconCls: 'info',
hander: function() {
MarketMakerApp.views.viewport.setActiveItem('businessInfo', {type: 'slide', direction: 'left' });
}
},
{
text: '2',
iconCls: 'star',
hander: function() {
this.add( MarketMakerApp.views.businessInfo);
this.setActiveItem(2);
}
},
{
text: '3',
iconCls: 'map',
hander: function() {
}
}
]
});
And the main panel is this:
MarketMakerApp.views.businessContainer = new Ext.Panel({
id: 'businessContainer',
layout: 'fit',
dockedItems: [
MarketMakerApp.views.businessTypeListToolbar,
MarketMakerApp.views.businessTabbar
],
items: [ MarketMakerApp.views.businessInfo]
});
The tabbar and toolbar are showing up fine, but I can't see the businessInfo panel.
Any suggestions would be appreciated.
p.s. I struggled with Tabpanel far too long to give up and just using tabbar now.
I haven't had any success in creating Panels (or whatever your view is) programmatically like that. Here's some code that does work w/that approach though.
Add an initComponent function to your businessContainer like the following instead of setting the items on the businessContainer panel:
initComponent: function(){
Ext.apply(this, {
items: [
MarketMakerApp.views.businessInfo
]
});
MarketMakerApp.views.businessContainer.superclass.initComponent.apply(this, arguments);
}