Is there a online demo page about effects by Ext.Fx

[rainchen]

not http://extjs.com/deploy/dev/examples/samples.html

for example effects-demo of scriptaculous: http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo

I know a third part example website, but why not an official one :
http://www.easyext.co.uk/examples/slidingtext/

[Animal]

Because this kind of thing is just trivial eye candy.

And the code is trivial. Stuff like.



Ext.get("my-element-id").fadeIn();


to fade an element in

or



Ext.get("my-element-id").highlight();


to highlight an element with an animated background colour.

And the API docs are very simple to follow.

So.... want some <blink> in your page? Knock yourself out!

[rainchen]

But seeing will be more impressed and make sense. It's much better if there is a "Demo" section in the API, such as : http://wiki.github.com/madrobby/scriptaculous/effect-highlight

[mankz]

I agree, though I'm not sure I want demo examples in the API. An effects section in the samples page could probably generate some buzz though.

[jay@moduscreate.com]

Someone did a scriptaculous-like page for Ext.

[jay@moduscreate.com]

I'm working on something for the 3.0 examples :)

[mschwartz]

The docs for 3.1.1 are weak in some areas regarding FX.



easing : String
A valid Ext.lib.Easing value for the effect:
backBoth
backIn
backOut
bounceBoth
bounceIn
bounceOut
easeBoth
easeBothStrong
easeIn
easeInStrong
easeNone
easeOut
easeOutStrong
elasticBoth
elasticIn
elasticOut


What the heck is an Ext.lib.Easing value? I don't see Ext.lib.Easing documented anywhere. What is the difference between easeBoth and easeBothStrong?

&c

[jay@moduscreate.com]

holy crap, this is almost a year old. I'll work next week or so to get my code into the base, after i get my SVN write issues resolved.

[evant]

Here's something I made a while ago when doing some testing:



Ext.onReady(function(){
var getDefaultOptions = function(){
var easing = Ext.getCmp('easing').getValue();
return {
duration: Ext.getCmp('duration').getValue(),
easing: easing == 'None' ? '' : easing,
remove: Ext.getCmp('remove').checked
};
}, runAnchor = function(el, name){
el[name](Ext.getCmp('anchor').getValue(), getDefaultOptions());
}, runFade = function(el, name){
el[name](Ext.apply({
endOpacity: Ext.getCmp('endOpacity').getValue()
}, getDefaultOptions()));
}, runDefault = function(el, name){
el[name](getDefaultOptions());
};

var fx = {
fadeIn: {
customFields: ['endOpacity'],
run: runFade.createDelegate(null, ['fadeIn'], true)
},
fadeOut: {
customFields: ['endOpacity'],
run: runFade.createDelegate(null, ['fadeOut'], true)
},
frame: {
customFields: ['color', 'count'],
run: function(el){
el.frame(Ext.getCmp('color').getValue(), Ext.getCmp('count').getValue(), getDefaultOptions());
}
},
ghost: {
customFields: ['anchor'],
run: runAnchor.createDelegate(null, ['ghost'], true)
},
highlight: {
customFields: ['color'],
run: function(el){
el.highlight(Ext.getCmp('color').getValue(), getDefaultOptions());
}
},
puff: {
run: runDefault.createDelegate(null, ['puff'], true)
},
scale: {
customFields: ['width', 'height'],
run: function(el){
el.scale(Ext.getCmp('width').getValue(), Ext.getCmp('height').getValue(), getDefaultOptions());
}
},
slideIn: {
customFields: ['anchor'],
run: runAnchor.createDelegate(null, ['slideIn'], true)
},
slideOut: {
customFields: ['anchor'],
run: runAnchor.createDelegate(null, ['slideOut'], true)
},
switchOff: {
run: runDefault.createDelegate(null, ['switchOff'], true)
}
};
var options = [];
for(var i in fx){
options.push(i);
}

var p = new Ext.form.FormPanel({
renderTo: document.body,
width: 600,
height: 300,
layoutConfig: {
trackLabels: true
},
items: [{
id: 'effect',
xtype: 'combo',
store: options,
editable: false,
forceSelection: true,
triggerAction: 'all',
fieldLabel: 'Effect',
listeners: {
select: function(cmb){
cmb.ownerCt.items.each(function(c){
if(c.isCustom){
c.hide();
}
});
var effect = fx[cmb.getValue()], custom = effect.customFields;

if(custom){
cmb.ownerCt.items.each(function(c){
if(custom.indexOf(c.id) > -1){
c.show();
}
});
}
}
}
}, {
fieldLabel: 'Duration',
id: 'duration',
xtype: 'numberfield',
value: 1
}, {
fieldLabel: 'Easing',
editable: false,
forceSelection: true,
triggerAction: 'all',
id: 'easing',
xtype: 'combo',
store: ['None', 'backBoth', 'backIn', 'backOut', 'bounceBoth', 'bounceIn', 'bounceOut', 'easeBoth', 'easeBothStrong', 'easeIn', 'easeInStrong', 'easeNone', 'easeOut', 'easeOutStrong', 'elasticBoth', 'elasticIn', 'elasticOut']
}, {
fieldLabel: 'Remove',
id: 'remove',
xtype: 'checkbox',
checked: false
}, {
fieldLabel: 'End Opacity',
id: 'endOpacity',
xtype: 'numberfield',
hidden: true,
isCustom: true
}, {
fieldLabel: 'Color',
id: 'color',
xtype: 'textfield',
hidden: true,
isCustom: true
}, {
fieldLabel: 'Count',
id: 'count',
xtype: 'numberfield',
hidden: true,
isCustom: true
}, {
fieldLabel: 'Anchor',
id: 'anchor',
xtype: 'textfield',
hidden: true,
isCustom: true
}, {
fieldLabel: 'Width',
id: 'width',
xtype: 'numberfield',
hidden: true,
isCustom: true
}, {
fieldLabel: 'Height',
id: 'height',
xtype: 'numberfield',
hidden: true,
isCustom: true
}],
buttons: [{
text: 'Run Effect',
handler: function(){
ct.update('');
var el = ct.createChild({
tag: 'div',
style: 'width: 100px; height: 100px; border: 1px solid red; background-color: #008000'
});

var name = Ext.getCmp('effect').getValue(), effect = fx[name];
effect.run.call(null, el);
}
}]
});

var ct = Ext.getBody().createChild({
tag: 'div',
style: 'width: 800px; height: 400px; border: 1px solid blue; padding: 10px;'
});
});

[jay@moduscreate.com]

I did not test Evan's code, but this is something I worked on during the Ext JS conference in 2009.


http://extjsinaction.com/tmp/fxexplorer/


I need to bake this a little more. With suggestions, I can make it better and can submit to the Ext JS examples page if desired.

[beldaniel]

Thanks for the sample..nice to see.

[mschwartz]

holy crap, this is almost a year old. I'll work next week or so to get my code into the base, after i get my SVN write issues resolved.

I couldn't find an even older thread to bump ;-)

Seriously though, I had a need to use FX and this thread is what google search found. The docs are weak - maybe a short description of what each effect does, remove reference to Ext.lib.Easing (or document that!), and certainly a demo would be nice.

[Animal]

I've said for years that the Ext.lib foundation needs documenting.

It is not scanned by the doc tool, so it's not the documenters' fault.

[mystix]

@mschwartz -- if you need a list of easing effects, here's one that was posted on the forums some weeks back (can't remember which thread / forum i saw it in though):
http://stack.hu/extjs/easing_list.html

it demonstrates + graphs the various effects.

[mschwartz]

I was able to figure enough out by trial and error...

For discussion purposes, let me describe my use case and how FX doesn't work 100% as I'd like it:

I have a viewport that has a toolbar at the top (north) and an iframe center. I want the toolbar to autohide and have a pin button on it. When you unpin it, FX easeOut almost does what I want; the problem is that easeOut wants to set the visibility to none (or whatever) to make the element completely disappear. What I want is for 1 pixel of it to show and on mouseover, it eases back to 100% its height.

It was a bit of messy code. While the easeOut was happening, mouseover handler had to be disabled so it wouldn't restart the FX effect. And so it wouldn't start the easeIn effect while it is doing the easeOut effect after unpinning the toolbar.

Additionally, in the effect complete handlers, I had to do:


toolbar.setHeight(0);
toolbar.el.show();


And the toolbar isn't 1 pixel tall, even though I setHeight(0), it's 2 pixels tall. Border in the css.

In all, I needed three state variables: toolbarPinned, toolbarBusy, and toolbarVisible.

There's also a noticeable jerk in the animation when the setHeight(0) happens.

bleh.