PDA

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



helloniko
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.

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

andycramb
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?

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

Joe
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.

http://code.google.com/p/extjscoremitux

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