View Full Version : [Ext Core]Ext.ux.MessageSlides

20 Jun 2009, 1:40 PM
MessageSlider is my first simple UX based on Ext Core.
It's really simple and same effect as the top right corner message slides box of extjs website.

(** if you extract the attachment but to find lost file extention ('.zip'), please use zip software open/extract it, thanks...)

-Tested on FF2+, IE7+, Chrome2, Safari3
-MIT License
-MessageSlider demo (http://cz9908.com/showcase/?item=message-slider&p=1)
-ExtWebPPT demo (http://cz9908.com/showcase/?item=Ext-Web-PPT&p=1)
-Git source (http://github.com/bluepower/Ext-Core-UX)
-UX doc (http://cz9908.com/blog/Niko-weblog-labs/lab-Niko-Ext-Core-UX-Doc/output/?class=Ext.ux.MessageSlider)

Example usage:

Ext.onReady(function() {
new Ext.ux.MessageSlider('msg-slider-section', {
displayIndex : 3,
intervalTime : 5,
items : [{
content: 'Ext Carousel example »',
url: 'http://extjs.com/playpen/ext-core-latest/examples/carousel/',
tip: 'The Carousel example provides a widget for browsing a set of objects',
target: 'show-example'
}, {
content: 'Ext JSONP example »',
url: 'http://extjs.com/playpen/ext-core-latest/examples/jsonp/',
tip: 'The JSONP example shows how you can fetch JSON data from a different domain',
target: 'show-example'
}, {
content: 'Ext Core 3.0 - API Documentation',
url: 'http://extjs.com/products/extcore/docs/'
}, {
content: '<img src="images/ext-site-logo.gif" />',
url: 'http://extjs.com',
tip: 'Welcome to ExtJS.com'

*Besides using config options, you may use custom event as well.

20 Jun 2009, 7:19 PM
looks good ;)

22 Jun 2009, 12:49 PM
very nice =D>

Question for you
On the init method you use

this.items = cfg.items;You have already executed the following line

Ext.apply(this, config);Will
this not already contain the items you passed in on the config after executing apply?

22 Jun 2009, 5:58 PM
you are right, no need for that line, I've did an update :)

23 Jun 2009, 2:10 PM
Thanks for posting the control.

Per our PM's your code has been added to the ExtJS Core MIT UX Code Library.


Note: The location in the tree may change as there is open discussion on SVN structure.