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.
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!'); }
});
}
});
I am using Navigation view. Initially it has one item(view) that contains a button. On tapping this button, a second view pushes in the navigation view. If the user intentionally or by accident double tap the button, it pushes second view two times. How can i solve this problem?
I have tried the buffer configuration as specified in this link http://docs.sencha.com/touch/2.3.0/#!/guide/events but problem with this solution is that it invokes the listener after the buffer time even on the first tap.
Here is sample code to demonstrate the issue.
Navigation View
Ext.define('Many.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
config: {
items: [
{
xtype:'firstView'
}
]
}
});
First View
Ext.define('Many.view.FirstView', {
extend: 'Ext.Panel',
xtype: 'firstView',
config: {
title: 'First View',
items: [
{
xtype: 'button',
id:'myButton',
text: 'Push Second View'
}
]
}
});
Second View
Ext.define('Many.view.SecondView', {
extend: 'Ext.Panel',
xtype: 'secondView',
config: {
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Second View'
}
]
}
});
Controller
Ext.define('Many.controller.Main', {
extend : 'Ext.app.Controller',
config : {
refs : {
myNavigationView : 'main',
myButton :'main #myButton'
},
control : {
myButton : {
tap : 'pushSecondView'
}
}
},
pushSecondView: function () {
var secondView = Ext.create('Many.view.SecondView');
this.getMyNavigationView().push(secondView);
}
});
Just add a condition whether that view exists in the viewport or not.
Add a reference in the controller like this:-
refs : {
myNavigationView : 'main',
myButton :'main #myButton',
secondView : 'secondView'
}
And add the condition:-
pushSecondView: function () {
if(!this.getSecondView()){
var secondView = Ext.create('Many.view.SecondView');
this.getMyNavigationView().push(secondView);
}
}
Here's how I do it:
/**
* This method will be called from every item in the app that can be double tapped to push multiple items.
*
* #returns {Boolean}
*/
ENSURE_NO_DOUBLE_TAP : function(classNameToPush) {
if (Ext.getClassName(Ext.getCmp('navigationview').getActiveItem()) == classNameToPush) {
console.log("Prevented DoubleTap.");
return false;
}
return true;
}
Then from any controller that uses navigationView.push({'theViewImPushing'}):
if (!ENSURE_NO_DOUBLE_TAP('App.view.TheViewImPushing')) {
return;
}
I keep a Statics singleton class around to call the ENSURE_NO_DOUBLE_TAP method from...but you could use it wherever fits.
I have 2 ListView's in my application, when a user clicks on an item of each listview item, the page should navigate to a different view.
In my case, when i click on each views it navigates to the same view. It seems like when the user taps on an item of the view it calls the same controller function. Here's my code, can someone help me solve this;
Ext.define('MyApp.controller.MyCOntroller', {
extend: 'Ext.app.Controller',
config: {
refs: {
OneList: 'onel',
TwoList: 'twol'
},
control: {
"list": {
itemtap: 'onOnelTap'
},
"list": {
itemtap: 'twolClicked'
}
}
},
onOnelTap: function(dataview, index, target, record, e, eOpts) {
console.log("hhhhhh "+e.event.target.nodeName);
},
courtRoomListClicked: function(dataview, index, target, record, e, eOpts) {
console.log(" 2 -- >list");
}
});
It seems that you have not declared your refs and controls properly.
Let's say your OneList has an id called one-list, then the refs and controls should be declared like this:
config: {
refs: {
OneList: 'one-list'
},
control: {
"OneList": {
itemtap: 'onOnelTap'
}
}
},
The rest is okay. Hope this helps.
If i understood correctly, your control configuration is not good and you may need to do like this
Ext.define('MyApp.controller.MyCOntroller', {
extend: 'Ext.app.Controller',
config: {
refs: {
// I assume that 'onel' and 'twol' are xtype of respective views
OneList: 'onel',
TwoList: 'twol'
},
control: {
OneList: {
itemtap: 'onOnelTap'
},
TwoList: {
itemtap: 'onTwolTap'
}
}
},
onOnelTap: function(dataview, index, target, record, e, eOpts) {
console.log("onOnel Tap ");
},
onTwolTap: function(dataview, index, target, record, e, eOpts) {
console.log("onTwol Tap");
}
});
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.
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