I build a Carousel containing containers with two items each: an image and a dataview. On click I want to flip the image to show the dataview. My problem is that the tap event doesn't fire on the right element. It fires on an 'img'-element, but not on the carous.
Ext.define('MY.controller.Mycarousel' , {
extend: 'Ext.app.Controller',
requires: [ 'Ext.Img' ],
config: {
refs: {
mycarouselView: '#mycarousel',
},
control: {
mycarouselView: {
activate: 'flipImage', // works
tap: 'flipImage', // doesn't work
},
'img': {
tap: 'flipImage', // works
}
}
},
How can I get the tap event on a carousel view?
I also tried:
Ext.define('MY.controller.Mycarousel' , {
extend: 'Ext.app.Controller',
requires: [ 'Ext.Img' ],
config: {
refs: {
myCarouselDataview: 'dataview'
},
control: {
myCarouselDataview: {
initialize: 'flipImage', // fires
itemsingletap: 'flipImage', // doesn't fire
itemtap: 'flipImage', // doesn't fire
itemtouchstart: 'flipImage' // doesn't fire
},
'img': {
tap: 'flipImage', // fires
},
}
},
If I click on the image, the image is flipped, the dataview appears, shows its html, but if I click on it then no events are fired. That's mysterious to me ...
tap on carousel doesn't work because Ext.carousel.Carousel doesn't have any such event:
http://docs.sencha.com/touch/2-1/#!/api/Ext.carousel.Carousel
so tap event must be fired by content of the carousel, which is img in your case.
Related
Can anybody tell How to implement clickor tap event for panel in sencha touch in controller
Thanks
Ext.define('FirstApp.controller.details', {
extend: 'Ext.app.Controller',
config: {
stores : ['your store'],
models : ['your model'],
refs: {
myContainer: 'your view'
},
control: {
'your view': {
activate: 'onActivate',// fires when view is activated
itemtap: 'onItemTap',// fires when item is tapped
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onItemTap: function(view, index, target, record, event) {
console.log('Item was tapped on the Data View');
console.log(view, index, target, record, event);
Ext.Msg.alert('', 'The user selected is: ' + record.get('username'));
},
});
Implement tap of Panel like this. It will work.
Ext.define('YourApp.view.text', {
extend: 'Ext.Panel',
xtype: 'text',
initialize: function () {
this.element.on({
tap: function () { alert('tapped!'); }
});
}
});
Can anybody tell How to implement listview item tap event in controller in sencha touch
Thanks
Do the following:
If your list is like below:
{
xtype: 'list',
name: 'myList',
store: 'test'
}
Then your controller will go like this:
config: {
refs: {
myList: 'list[name="myList"]'
},
control: {
myList: {
itemtap: 'onItemTap' // fires when listitem is tapped
}
}
},
onItemTap: function(view, index, target, record, event) {
console.log('List Item was tapped of the list view');
........ your code goes here .........
}
Note: These small things you can find in sencha docs.
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]'
How do I switch views in Sencha Touch? Currently I have a new view being shown, but it looks like it overlays onto the existing one. I think I need to hide the previous or destroy it. I was thinking of maybe using Ext.getCmp("noteslist") but this returns 'undefined' when trying to get the current container. Is this the recommended way of navigating between views or is there a better way?
App
Ext.application({
name: "NotesApp",
controllers: ["NotesController", "TestController"],
views: ["NotesListContainer"],
launch: function () {
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
Ext.Viewport.add(notesListContainer);
}
});
Controller:
Ext.define("NotesApp.controller.NotesController", {
extend: "Ext.app.Controller",
views: [
"TestListContainer"
],
config: {
refs: {
newNoteBtn: "#new-note-btn",
saveNoteBtn: "#save-note-btn",
},
control: {
newNoteBtn: {
tap: "onNewNote"
},
saveNoteBtn: {
tap: "onSaveNote"
}
}
},
onNewNote: function () {
console.log("onNewNote");
},
onSaveNote: function () {
console.log("onSaveNote");
Ext.Viewport.add({xtype:'testlist'}).show();
// How do I remove the current one?....
},
launch: function () {
this.callParent();
console.log("launch");
},
init: function () {
this.callParent();
console.log("init");
}
});
View
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "New",
ui: "action",
id:"new-note-btn"
}, {
xtype: "button",
text: "Save",
ui: "action",
id:"save-note-btn"
}]
}]
}
Using Ext.Viewport.add you only add component to viewport, but not set it as active item. You can use Ext.Viewport.setActiveItem for add component and set it as active item in one call.
Example:
//1
Ext.Viewport.setActiveItem({xtype:'testlist'});
//or 2
//Create and add to viewport
Ext.Viewport.add({xtype:'testlist'});
//set active item by index
Ext.Viewport.setActiveItem(1);
//or 3
var list = Ext.create('NotesApp.view.NotesListContainer', {id : 'noteList'});
Ext.Viewport.add(list);
.....
//In place where you need to show list
Ext.Viewport.setActiveItem(list);
If you want to animate swiching between views then use animateActiveItem(list, {type: 'slide', direction: 'right'}) instead a setActiveItem.
It's how you can work with Ext.Viewport and any container with card layout. In the real application view can be created in one part of app(in the controller, int the app, in the view) and set as active in other part. In this case you need get link to the list by any way and use it in the setActiveItem.
There are two techniques 1 using setActiveItem and the other using navigation view...
Navigation View
Set Active item method:
var view=Ext.Viewport.add({xtype: 'testlist'});
Ext.Viewport.setActiveItem(view);
view.show(); //This is additionally done to fire showAnimation
I have two views. The User view has some text and a button. I want to use that button to switch to the second view. But i don't know how this works with sencha touch 2. When i press the button on the "UserView" (which is the first view), then i get the following error:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
This is basically how my code looks right now:
app.js
Ext.Loader.setConfig({ enabled: true });
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'AM',
controllers: [
'Main'
]
});
}
});
The Main controller
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
views : ['User'],
init: function() {
this.getUserView().create();
this.control ({
'#new': {
tap: function() {
alert('aaaa');
}
}
});
}
});
And the two views:
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
fullscreen:true,
items: [{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
2nd view
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
fullscreen: true,
html: 'w00t'
}
});
Here is your application written the way it should be. Here are a few notes about the changes I made:
You should call Ext.application instead of Ext.setup when creating your MVC application.
All root views should be defined inside your app.js.
You no longer need to use this.control() in your controllers. You can simply use the control configuration in the config block.
You should define all views in the views config of Ext.application.
Instead of creating the view in init, do it in launch. This is components should be added into the view.
app/view/User.js
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
app/view/New.js
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
html: 'w00t'
}
});
app/controller/Main.js
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'#new': {
// On the tap event, call onNewTap
tap: 'onNewTap'
}
}
},
launch: function() {
// When our controller is launched, create an instance of our User view and add it to the viewport
// which has a card layout
Ext.Viewport.add(Ext.create('AM.view.User'));
},
onNewTap: function() {
// When the user taps on the button, create a new reference of our New view, and set it as the active
// item of Ext.Viewport
Ext.Viewport.setActiveItem(Ext.create('AM.view.New'));
}
});
app.js
Ext.application({
name: 'AM',
// Include the only controller
controllers: ['Main'],
// Include all views
views: ['User', 'New'],
// Give the Ext.Viewport global instance a custom layout and animation
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
}
});
I also suggest you checkout the great guides over on the Sencha Touch API Docs, as well as checking out the Sencha Forums as they are very active and are a great source of information.