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
};
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 back button functionality in sencha
Thanks
Use Navigationview component.NavigationView auto add Back button on top toolbar and handles functionality of Back.
config: {
title:'Home',
layout:'fit',
items:[
{
xtype:'titlebar',
title:'Home',
docked:'top',
items: [
{
xtype: 'button',
text: 'Logout',
align: 'right',
initialize: function () {
this.element.on({
tap: function () { Ext.Viewport.setActiveItem(Ext.widget('home'));
}
});
}
}
]
},
}
}
});
Please check the code below, what I am doing wrong? I want to output to console when tap event on body.
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
el: {
tap: function() {
console.log('tapped');
}
}
}
}
});
no output to console...
You are using an old version of adding an element listener.
If you use the compat version fo Sencha Touch 2, it should give you a warning in the console like this:
So your code should look something like this:
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
tap: {
element: 'element',
fn: function() {
console.log('tapped');
}
}
}
}
});
You can find out more information about the changes on the Sencha Forums.
Update
If you want to delegate to a child of the item, you must still target element, and then within your function check if the tapped element is the one you want:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
fn: function(e) {
var element = Ext.get(e.target);
if (element.id == "test") {
alert('tap!');
}
}
}
}
});
If you want to select an element by class or id, it's cleaner to use the delegate option:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
delegate: '#test',
fn: function(e) {
alert('Element with id "test" was tapped!');
}
}
}
});
Ext.define('app.view.Card', {
config : {
layout : 'card',
items : [{
xtype : 'panel',
docked : 'top',
html : "<img width='320px' id='image1' src='images/im.jpg'/>",
listeners : {
touchstart : {
element : 'element',
fn : function() {
console.log('tapped')
}
}
}
}]
},
initialize : function() {
// if recording/handling the event in the controller.
this.relayEvents(this.element, ['tap']);
}
});
A simpler and cleaner way of getting Tappable Panels
Ext.define('My.component.TappablePanel', {
extend: 'Ext.Panel',
initialize: function () {
this.element.on('tap', function(){
this.tap();
}, this);
},
tap: function() {
console.log('I heard the tap!');
}
});
And it can be overridden in child classes like so...
Ext.define('My.view.TestPanel', {
extend: 'My.component.TappablePanel',
config: {
html: 'Tap this panel',
style: 'background-color: #5E99CC'
},
tap: function() {
console.log('I handled the tap');
}
});
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.
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