In Sencha Touch 2, I use this code snippet in my controller:
this.control({
'#test_button': {
tap: function () {
var root_c = Ext.getCmp("main_container");
root_c.setActiveItem(
1, {type:'slide', direction: 'left'}
);
}
}
});
It works nicely, but it switches only the "default way", not the "sliding way". Can anyone help, why?
Thanks in advance,
R
As the others said, use animateActiveItem. Alternately you can keep your (single parameter) setActiveItem and also set a showAnimation and hidAnimation on the particular view being shown.
Having said that, this has been problematic in my experience if your shown items are nested with a lot of going back and forth.
update
I just discovered that there's an apparent timing bug in st2.0.1 such that if you use show/hideAnimation, you can't actually destroy the object that has the attribute set. Bit me hard. Related: http://www.sencha.com/forum/showthread.php?192847-Animating-panels-throws-Cannot-call-method-getPageBox-of-null
In Sencha Touch 2, the proper method for your need is animateActiveItem
this.control({
'#test_button': {
tap: function () {
var root_c = Ext.getCmp("main_container");
root_c.animateActiveItem(1, {type:'slide', direction: 'left'});
}
}
});
In sencha touch 2 setActiveItem has only one parameter:
setActiveItem( Object/Number activeItem )
So you have to use:
animateActiveItem( Object/Number activeItem, Object/Ext.fx.layout.Card animation )
More info: http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-animateActiveItem
Related
I am working on integrating the Bryntum Kanban board into an EXTJS application. In the top toolbar of the kanban, I have an ExtJS combobox that changes the view so that users can view their private taskboard as well as the taskboard for their groups. (Users can be in more than one group) When the view is changed, both the statestore that populates the columns of the taskboard and the userstore that populates the userpicker need to reload, as well as the taskstore. The problem is that after the view is changed, clicking on a task throws two errors:
Uncaught TypeError: can't access property "getRange", this.selected is null
ExtJS 2
relayMethod http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6471
map ExtJS
relayMethod http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6470
deselectAll http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6446
deselectAll http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7431
onDragStarting http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7532
ExtJS 4
getDragData http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:4896
ExtJS 86
ext-all-debug.js:200495:9
and
Uncaught TypeError: can't access property "getRange", this.selected is null
ExtJS 2
deselectAllInOtherSelectionModels http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6465
each ExtJS
forEachSelModel http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6475
deselectAllInOtherSelectionModels http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6464
deselectAllInOtherViews http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7385
onTaskClick http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7381
ExtJS 2
ext-all-debug.js:200495:9
Here is the code for the change listener on the combobox:
change: function (field, newValue) {
var ts = Ext.data.StoreManager.lookup('taskstore');
var ss = Ext.data.StoreManager.lookup('statestore');
var us = Ext.data.StoreManager.lookup('userstore');
var taskboard = field.up('mytaskboard');
console.log(taskboard);
ts.getProxy().setExtraParam('view', newValue);
ss.getProxy().setExtraParam('view', newValue);
us.getProxy().setExtraParam('view', newValue);
taskboard.deselectAll();
ss.reload({
callback: function () {
// taskboard.deselectAll();
taskboard.refresh();
us.reload({
callback: function () {
taskboard.userMenu.picker.refresh();
ts.reload({
callback: function () {
console.log(taskboard);
}
});
}
});
}
});
}
Is there anything that I need to do before I reload the stores to ensure that this error is not thrown? If anyone has also had this problem I'd appreciate your solutions. I have tried deselecting all before reloading, as you can see in the code above, but that doesn't help either.
After troubleshooting, I was able to find a solution that seems to be working. I had to add the following line to the change listener before reloading the stores:
delete field.up('mytaskboard').selModel;
This line deletes all the selection models from the taskboard, which were the things that were causing the problem in the first place. Now the views change and everything works as expected. I am still interested to know if this may cause other issues down the line though.
I am trying out the mmenu plugin (http://mmenu.frebsite.nl/) and am super excited about it. I have it working for my responsive site... The only problem is that, when I go from a width with the mmenu working to a desktop view (like say 768px to 1024px or bigger), I need the mmenu to go away, remove itself, etc.
Because the mmenu plugin pulls my nav list out of its original spot in the HTML, I need it to get put back again and show itself... Not seeing anything about this in the docs. If I missed it or you have ideas, let me know!
Thanks.
Rather than clone the menu I think a better option would be to initiate the jQuery function when the screen is below a certain size.
$(window).resize(function() {
if ($(window).width() < 768) {
$(function() {
$(' nav#menu').mmenu();
});
}
else {
do some thing else
}
});
I have solved this by cloning the menu when the browser size is reduced (using Harvey: http://harvesthq.github.io/harvey/) and only activating it with mmenu at this point. When I resize back up, I delete the cloned mobile version of the menu, and then show the desktop menu again. One problem I faced was that if you resize back up to desktop with the mobile menu expanded, it didn't automatically close. I fixed this by adding a trigger event to close it before removing the mobile version.
Markup:
<ul id="menu">
<li class="menu-item">
Home
</li>
.....
</ul>
Jquery:
$( document ).ready(function() {
/* Add and remove the mobile version of the menu */
var toggleMenu = {
elem: $("#menu"),
mobile: function(){
//clone the existing top menu and append it to the mobile menu
var menu = this.elem.clone(true).addClass("mobile-added").appendTo("#mobile-menu");
//activate mmenu
$("#mobile-menu").mmenu({
position: "right",
zposition: "back",
});
//hide desktop top menu
this.elem.hide();
},
desktop: function(){
//close the menu
$("#mobile-menu").trigger("close.mm");
//remove cloned menu
$('.mobile-added').remove();
//reshow desktop menu
this.elem.show();
}
};
Harvey.attach('screen and (max-width:1024px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.mobile();
},
off: function(){ // called each time the query is deactivated
}
});
Harvey.attach('screen and (min-width:1025px)', {
setup: function(){ // called when the query becomes valid for the first time
},
on: function(){ // called each time the query is activated
toggleMenu.desktop();
},
off: function(){// called each time the query is deactivated
}
});
});
You have to clone the menu and making a media query.
http://mmenu.frebsite.nl/support/tips-and-tricks.html
Here you can find the explanation.
Post that in your CSS
#media screen and (min-width:1000px) {
#menu {
display:none
}
}
Hi may be setting the options will help you.
The options page is here
and a working example is here and here
I have a Backbone View with events for mobile and desktop version:
events: {
"touchstart .button": "action1",
"mousedown .button": "action1",
"touchend .button": "action2",
"mouseup .button": "action2",
}
I want only one of the event fired when touched from my mobile device. Currently in one of my mobile device, action1 is fired twice.
I have tried using a custom method from this solution, but somehow in Android 2.3 the custom method for touchend after touchstart won't be fired, but using pure "touchend" would be fired instead.
Thus I'm thinking if Backbone.js can prevent "mouseup" from being fired if "touchend" is being fired.
Another approach, which feels slightly less hacky to me:
I like to test for touch events and set a global variable upon initialization of the application.
MyApp.clickEvent = ('ontouchstart' in window) ? "touchstart" : "mousedown";
Then in my views I perform something like:
events: function() {
var _events = {};
_events[MyApp.clickEvent + " .button"] = "action1";
return _events;
}
One hacky solution would be to use the underscore.js function throttle to make it so that the function can be called only once per x milliseconds. Check the documentation here to see if it suits your needs.
The final solution would be:
action1: _.throttle(function(params) {
// Do what you do here
}, 400); // The timeframe within which the function can be called just once.
You can define a function to determine touch devices like:
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
this function is from another thread What's the best way to detect a 'touch screen' device using JavaScript?
then use it in events:
events: function() {
if(is_touch_device) {
return {
/// touch events
}
} else {
return {
/// mouse events
}
}
}
if they are exactly the same dehrg answer would be a less redundant one
I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size.
(function ($) {
Drupal.behaviors.views_fluidgrid = {
attach: function (context) {
$('.views-fluidgrid-wrapper:not(.views-fluidgrid-processed)', context).addClass('views-fluidgrid-processed').each(function () {
// hide items while loading
var $this = $(this).css({opacity: 0}),
id = $(this).attr('id'),
settings = Drupal.settings.viewsFluidGrid[id];
$this.imagesLoaded(function() {
// show items after .imagesLoaded()
$this.animate({opacity: 1});
$this.masonry({
//the masonry settings
});
});
//implement the function of jquery.infinitescroll.min.js
$this.infinitescroll({
//the infinitescroll settings
},
//show new items and attach behaviours in callback
function(newElems) {
var newItems = $(newElems).css({opacity: 0});
$(newItems).imagesLoaded(function() {
$(newItems).animate({opacity: 1});
$this.masonry('appended', newItems);
Drupal.attachBehaviours(newItems);
});
});
});
}
};
})(jQuery);
Now I read that I need to Reattach the Drupal.behaviours if I want the hover event to also take place on the newly added content.
(function ($) {
Drupal.behaviors.imgOverlay = {
attach: function (context) {
var timeout;
$('.img_gallery').hover(function() {
$this = $(this);
timeout = setTimeout(change_opacity, 500);
}, reset_opacity);
function change_opacity() {
//set opacity to show the desired elements
}
function reset_opacity() {
clearTimeout(timeout);
//reset opacity to 0 on desired elements
}
}
};
})(jQuery)
Where do I now write the Drupal.attachBehaviours() to make it work actually? Or is there some other error I just dont see atm? I hope I wrote the question so that its understandable and maybe it also helps somebody else, since I experienced that there is no real "official" running Version of this combination in drupal 7.
Ok, the solution is actually pretty simple. When writing it correctly than it also runs. its of course not Drupal.attachBehaviours() but Drupal.attachBehaviors() . So this combination now works and I am finally relieved :).
I have been following:
http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_2.0
And using the following example:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
I am using something very similar:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).addClass('product-selected');
}
Ext.select('.product').on('click', paragraphClicked);
});
However it does not appear to work correctly. e.target appears to return the ext viewport object.
I am actually using Ext 3 not 2 so I guess there must be differences.
I never used e.target, always e.getTarget().
Maybe you can try e.getTarget(".product") ?
Or maybe you can play with the delegate options of addListener in Ext.Element.