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!'); }
});
}
});
Related
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 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 need to display an image and action listener for the image.
Is it possible, if so please let me know.
Thanks in advance.
Yes. There is the Ext.Img component which allows you to do just this. It also has tap and load events so you know when a user taps on the image and when it loads.
Sample code:
Ext.setup({
onReady: function() {
var image = Ext.Viewport.add({
xtype: 'image',
src: 'https://www.google.com/intl/en_com/images/srpr/logo3w.png',
listeners: {
tap: function() {
console.log('Image tapped!');
},
load: function() {
console.log('Image loaded!');
}
}
});
}
});
yes you can add handler for image
{
xtype: 'button',
icon: '/public/image.png',
iconMask: false,
handler: imageHandler
}
and your handler function
var imageHandler = function(button, event) {
// your handler function
};
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.