I am new to sencha touch.
I have a problem with the button tap event. Actually I have a button with a background image that is declared in the cls property of Button:
Ext.define('app.view.common.PageHeader', {
extend: 'Ext.Container',
xtype: 'pageHeader',
config: {
items: [
{
xtype: 'button',
left: 10,
top: 10,
baseCls: 'null',
cls: 'btn_back', //with background:url('btn_img.png')
listeners: {
tap: function () {
console.log('button tapped...');
//history.back();
this.removeCls('btn_back');
this.addCls('btn_press');
},
release: function () {
console.log('button released..');
}
}
}
]
}
});
Now I just want to change the background image of the button when the button is tapped using removeCls() and addCls().
But from Sencha documentation I have not found any event like that.
So is there and way to do this?
Just remove all listeners and handlers you have written. It's simply the pressedCls config for your button. For example:
pressedCls: 'css_properties_when_the_button_is_pressed'
Hope this helps.
Related
I have an extjs menu, in which, upon clicking a button, a colorPicker is opened.
When a color is selected, onColorPickerSelect: function(colorpicker, color, eOpts) springs into action. How do I select the button element in this function, taking the value of the colorpicker variable as my start point?
items: [
{
xtype: 'button',
itemId: 'color1',
style: 'background-color:#fc0;',
text: '1. Farbe',
menu: {
xtype: 'colormenu',
listeners: {
select: {
fn: me.onColorPickerSelect,
scope: me
}
}
}
}
]
As I answer in your previous question, use var button = colorpicker.up('button');
onColorPickerSelect: function(colorpicker, color, e0pts) {
var button = colorpicker.up('button');
button.getEl().setStyle('background-color', '#' + color);
}
When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this
I would like to switch views with a button, there is absolutely no examples of it in a MVC context in the sencha documentation although they recommend developers to use their build in MVC architecture. I guess its because Touch 2.0 is rather new.
http://docs.sencha.com/touch/2-0/#!/api
The video about the list component is also about navigation.View, but since the list component is used, they dont show how to switch views with a button.
Video: Intro to List Component
This is the code i have so far:
uddannelser.js (First view)
Ext.define("VUCFyn.view.uddannelser", {
extend: "Ext.navigation.View",
xtype: "uddannelser",
requires: [
"VUCFyn.view.avu"
],
config: {
title: "Uddannelser",
cls: "uddannelser",
items: [
{
title: "Uddannelser",
xtype: "container",
margin: 20,
layout: "vbox",
items: [
{
xtype: "button",
text: "AVU",
width: 100
}
]
}
]
}});
avu.js (subview of uddannelser)
Ext.define("VUCFyn.view.avu", {
extend: "Ext.Panel",
xtype: "avu",
config: {
title: "AVU",
cls: "avu",
scrollable: true,
items: [
{
xtype: "label",
html: [
"<p>Almen Voksenuddannelse - avu - er et tilbud om uddannelse til alle over 18 år. Du kan tage avu-fagene et ad gangen eller i en kombination med flere fag. Du kan også kombinere avu-fagene med andre enkeltfag på FVU og/eller hf.</p>",
"<h5>AVU omfatter kernefagene:</h5>",
].join("")
}
]
}});
Main.js (controller)
Ext.define('VUCFyn.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
uddannelser: "uddannelser"
},
control: {
"uddannelser": {
tap: "showDetail"
}
}
},
showDetail: function () {
this.getUddannelser().push({
xtype: "avu"
});
},
init: function () {
}});
Please, if someone could show me how to do it, based on the above code (or similar) that would be great.
btw: the answers in this thread: Sencha Touch 2 MVC - how to switch views with button is not working for me. (No errors though) I think its for Sencha Touch 1.1, and a lot of things have apparently changed in 2.0
Hi I think you just need to fix the controller and it will work, try the following and let me know how you get on.
config: {
refs: {
uddannelser: "uddannelser",
uddannelserButton: "uddanelser button"
},
control: {
"uddannelserButton": {
tap: "showDetail"
}
}
},
So all I have done is add a selector for the button in your uddanelser view and attached the click listener to that. Good luck!
Are you trying to listen for tap events on the navigationview you've given the uddannelser cls? There's a couple of issues with your setup;
Firstly, it doesn't look like you are using component queries properly in your controller, check this documentation: http://docs.sencha.com/touch/2.4/apidocs/#!/api/Ext.ComponentQuery
Depending on how many of these components in the view you want the controller to manage, you can either give it an id and search for the component by "#id" or you can use the xtype and a config option, such as "navigationview[cls=uddannelser]".
Secondly, you can't listen for tap events on a navigationview, if you wanted to listen for tap events on this component you'd have to listen for the tap event on the element and relay the event. I suspect you are actually trying to listen for the tap event on the button though, in that case create two refs in your controller, one for the navigationview and one for the button, listen for the tap event on the button and push the panel on the navigationview like you are now.
I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},
I have a problem abaout Sencha. I would like to make some calculations when a panel visually deactivated. I think 'deactive' public event had to supply this. but i didn't do that for all the things that i tried. is there anybody have any idea?
var hastaDetayCard;
enlil.views.HastaDetay = Ext.extend(Ext.Panel, {
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
cls: 'hasta-detay',
listeners:{
el:
{
deactive:function()
{
// /////calculations;
}
},
scope:this
}
});
The event is deactivate, not deactive.
And you probably don't need to put it into the element ("el:{..}" stuff in your code).