Sencha Touch 2 - Slide Animation on button - animation

I'm trying to get a slide animation on a button inside a container but I'm unable to do it.
By the way, fade and flip was working fine.
I want to do animation like shown below when all buttons are shown.
Here's the image of what I am trying to achieve:
EDIT :
I am running the below code inside initialize() event of the container.
Ext.Anim.run(this.getComponent('btnId'),'flip',{
out: true,
delay: 1000,
duration: 500,
});

Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left',
duration: 1000
})
But the important thing is to ensure you require Ext.Anim in your application. Put this in your main app.js
Ext.requires('Ext.Anim');
or
Ext.application({
name: 'myapp',
requires: [
'Ext.Anim'
]
});

Hi #user1452041 try this please,
Ext.Anim.run(Ext.getCmp('btnId'), 'slide', {
direction: 'left'
})
direction attribute depend you if you want to left or right
I hope this helps. :) Ciao

Related

CKeditor : notification called from dialog isn't displayed at foreground

In CKeditor4, I have tried to show a notification when the dialog is opened at first time but the notification is displayed behind the dialog box. Is-there a way to show the notification at foreground ?
This is my code in the dialog part :
CKEDITOR.dialog.add( 'MypluginDialog', function( editor ) {
return {
title: 'my plugin title,
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'tab-basic',
label: 'Dialog settings',
elements:
[
{
type: 'text',
id: 'title',
label: 'My title',
default: ''
}
]
}
],
onOk: function() {
},
onShow: function() {
var notification1 = new CKEDITOR.plugins.notification( editor, {
message: 'Error occurred',
type: 'warning'
} );
notification1.show();
}
};
});
So how to display the notification not behind the dialog box ?
Thanks by advance
Notifications can be displayed in front of any dialog after adjusting their z-index CSS property, for example (!important needed since it has inline z-index style already):
.cke_notifications_area {
z-index: 10050 !important;
}
Keep in mind that dialogs and notifications z-index value depends on CKEditor 4 baseFloatZIndex configuration option (which is 10000 by default) so if this configuration option was changed you need to adjust CSS accordingly.
Please also keep in mind that Notification plugin is not really intended to be displayed over dialogs since it works in a way that it's positioned related to editor editable area (and dialog is not) and may display on the bottom part of a dialog or some more unexpected places (depending on editor position).
See this codepen demo.

How to navigate to specific page on back button event in nativescript 6

I wrote some code to capture the back button event on android when I was using nativescript 5 and it was working fine, but after upgrading to nativescript 6 weird behaviors appeared like:
1- if clear history is set to true, the app navigate to the page then close.
2- if clear history is set to false it navigates to the page then navigate back to the previous page.
An example for this behavior:
Let's say I want the app to navigate to page A when back button pressed,
and I am in page B so the two weird behaviors are:
clearHistory: true the app navigate to page A and close.
clearHistory: false the app navigate to A and return to B.
Here is the code:
if (application.android) {
application.android.on(application
.AndroidApplication
.activityBackPressedEvent, backEvent);
}
function backEvent(){
console.log('pressed')
const navigationEntry = {
moduleName: 'views/mainPage/main-page',
animated: true,
clearHistory: false,
transition: {
name: "slideLeft",
duration: 380,
curve: "linear"
}
}
frame.topmost().navigate(navigationEntry)
}
Is there something that I miss in nativescript 6?
Project github repo here
If you like to navigate upon back button, you must cancel the back navigation first by setting the cancel flag to true.
function backEvent(args) {
args.cancel = true;
console.log('pressed')
const navigationEntry = {
moduleName: 'views/mainPage/main-page',
animated: true,
clearHistory: false,
transition: {
name: "slideLeft",
duration: 380,
curve: "linear"
}
}
frame.topmost().navigate(navigationEntry)
}

fullcalendar not showing correctly in laravel 4.2

I'm using Laravel framework and I'm very new to it.
Right now I'm trying to put in the Fullcalendar plugin, which I've done it before in other frameworks (Codeigniter, Play framework) and it worked amazingly.
However in Laravel, it doesn't seem to work like how it suppose to. The calendar doesn't show correctly, the prev and next buttons not show up, and the events not showing.
Please help
Here is my code. I'm using mockup events on the frontend.
$('#schedule').fullCalendar({
header: {
right: '',
center: '',
left: 'prev,next title weekNumber'
},
titleFormat: "D MMMM YYYY [(สัปดาห์ที่ 1 ของ 12)]",
defaultView: 'agendaWeek',
aspectRatio: 1,
events: events,
eventRender: function(event, element) {
var content = '<div class="fc-title">'+event.title+'</div>';
content += '<div class="fc-desc">'+event.description+'</div>'
element.find('.fc-content').html(content);
},
eventMouseover: function(event, jsEvent, view) {
$(this).append('<div class="event-hover"><div class="hover-pointer"></div><div>'+event.hoverContent+'</div></div>')
},
eventMouseout: function( event, jsEvent, view ) {
$('.event-hover').remove();
}
});
I've now found an answer to this.
It's not because of laravel.
I've added the fullcalendar.print.css into it that's why the css was messed up. So I've now removed it and it works perfect.
Thanks anyway for all the help

Accessing canvas in Flowplayer

we are using the Flowplayer (Documentation) in one of our webprojects.
I want to change (or hide) the canvas after the video has started. I can hook it to the clip-event "onStart", but I can't access the canvas object/plugin.
I already tried:
$f('playerid').getPlugin('canvas').hide()
$f('playerid').getCanvas().hide()
My player settings are:
var player_settings = {
key: '...',
logo: {
url: '',
fullscreenOnly: false,
displayTime: 0
},
clip: {
url: '...',
autoPlay: false,
scaling: 'orig'
},
canvas:{
background: 'url(...) center center no-repeat',
backgroundGradient: 'none'
}
};
But nothing seems to work. Any ideas?
getPlugin('canvas') is definitely a right way to get the canvas handler, and you can manipulate its appearance via call like:
getPlugin('canvas').css('', '');
In your case to hide the canvas, may be you can try getPlugin("canvas").css({backgroundImage: ""});.
See more ref in this post

getting touch coordinates from panel with a background image in sencha touch

I am working with a sencha panel in the below fashion.
Is there a way to attach a handler say like touch which can return the coordinates of the touch
var world_map = new Ext.Panel({
fullscreen: true,
style: 'background-color:black',
autoScroll:true,
html:'<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>'
});
The basic idea is to be able to detect the points where the user touches, is this possible using such a panel ?
thank you
This is definitely possible, and rather easy by using advanced listener options. The trick is to set the element property on the listener so that you are binding tap events to the DOM element over the component.
Here is a working example on Sencha Fiddle:
https://fiddle.sencha.com/#fiddle/8ua
var world_map = new Ext.Panel({
fullscreen: true,
style: 'background-color:black',
autoScroll: true,
html: '<img id="w_map" src="./images/worldmap.png" width="90%" height="90%"></img>',
listeners: [{
event: 'tap',
element: 'element',
fn: function(event) {
console.log(event);
alert('Touch Position: ' + event.touch.pageX + ' ' + event.touch.pageY);
}
}]
});

Resources