By WebOsPublisher

Techno Paper: All about Ext.Button!
*/
/* Content
———————————————– */
body
font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #222222;
background: #66bbdd none repeat scroll top left;
padding: 0 40px 40px 40px;

html body .region-inner
min-width: 0;
max-width: 100%;
width: auto;

a:link
text-decoration:none;
color: #2288bb;

a:visited
text-decoration:none;
color: #888888;

a:hover
text-decoration:underline;
color: #33aaff;

.body-fauxcolumn-outer .fauxcolumn-inner
background: transparent url(//blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
_background-image: none;

.body-fauxcolumn-outer .cap-top
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #66bbdd none repeat scroll top left;

.body-fauxcolumn-outer .cap-top .cap-left
width: 100%;
background: transparent url(//blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
_background-image: none;

.content-outer
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;

.content-inner
padding: 10px 10px;

.content-inner
background-color: #ffffff;

/* Header
———————————————– */
.header-outer
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;

.Header h1
font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #3399bb;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);

.Header h1 a
color: #3399bb;

.Header .description
font-size: 140%;
color: #777777;

.header-inner .Header .titlewrapper
padding: 22px 30px;

.header-inner .Header .descriptionwrapper
padding: 0 30px;

/* Tabs
———————————————– */
.tabs-inner .section:first-child
border-top: 1px solid #eeeeee;

.tabs-inner .section:first-child ul
margin-top: -1px;
border-top: 1px solid #eeeeee;
border-left: 0 solid #eeeeee;
border-right: 0 solid #eeeeee;

.tabs-inner .widget ul
background: #f5f5f5 url(//blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid #eeeeee;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;

.tabs-inner .widget li a
display: inline-block;
padding: .6em 1em;
font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #999999;
border-left: 1px solid #ffffff;
border-right: 1px solid #eeeeee;

.tabs-inner .widget li:first-child a
border-left: none;

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover
color: #000000;
background-color: #eeeeee;
text-decoration: none;

/* Columns
———————————————– */
.main-outer
border-top: 0 solid #eeeeee;

.fauxcolumn-left-outer .fauxcolumn-inner
border-right: 1px solid #eeeeee;

.fauxcolumn-right-outer .fauxcolumn-inner
border-left: 1px solid #eeeeee;

/* Headings
———————————————– */
h2
margin: 0 0 1em 0;
font: normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
text-transform: uppercase;

/* Widgets
———————————————– */
.widget .zippy
color: #999999;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);

.widget .popular-posts ul
list-style: none;

/* Posts
———————————————– */
.date-header span
background-color: transparent;
color: #222222;
padding: inherit;
letter-spacing: inherit;
margin: inherit;

.main-inner
padding-top: 30px;
padding-bottom: 30px;

.main-inner .column-center-inner
padding: 0 15px;

.main-inner .column-center-inner .section
margin: 0 15px;

.post
margin: 0 0 25px 0;

h3.post-title, .comments h4
font: normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 0;

.post-body
font-size: 110%;
line-height: 1.4;
position: relative;

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

.post-body img, .post-body .tr-caption-container
padding: 5px;

.post-body .tr-caption-container
color: #222222;

.post-body .tr-caption-container img
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);

.post-header
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;

.post-footer
margin: 20px -2px 0;
padding: 5px 10px;
color: #666666;
background-color: #f9f9f9;
border-bottom: 1px solid #eeeeee;
line-height: 1.6;
font-size: 90%;

#comments .comment-author
padding-top: 1.5em;
border-top: 1px solid #eeeeee;
background-position: 0 1.5em;

#comments .comment-author:first-child
padding-top: 0;
border-top: none;

.avatar-image-container
margin: .2em 0 0;

#comments .avatar-image-container img
border: 1px solid #eeeeee;

/* Comments
———————————————– */
.comments .comments-content .icon.blog-author
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

.comments .comments-content .loadmore a
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;

.comments .comment-thread.inline-thread
background-color: #f9f9f9;

.comments .continue
border-top: 2px solid #999999;

/* Accents
———————————————- */
.section-columns td.columns-cell
border-left: 1px solid #eeeeee;

.blog-pager
background: transparent none no-repeat scroll top center;

.blog-pager-older-link, .home-link,
.blog-pager-newer-link
background-color: #ffffff;
padding: 5px;

.footer-outer
border-top: 0 dashed #bbbbbb;

/* Mobile
———————————————– */
body.mobile
background-size: auto;

.mobile .body-fauxcolumn-outer
background: transparent none repeat scroll top left;

.mobile .body-fauxcolumn-outer .cap-top
background-size: 100% auto;

.mobile .content-outer
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 40px;

body.mobile .AdSense
margin: 0 -40px;

.mobile .tabs-inner .widget ul
margin-left: 0;
margin-right: 0;

.mobile .post
margin: 0;

.mobile .main-inner .column-center-inner .section
margin: 0;

.mobile .date-header span
padding: 0.1em 10px;
margin: 0 -10px;

.mobile h3.post-title
margin: 0;

.mobile .blog-pager
background: transparent none no-repeat scroll top center;

.mobile .footer-outer
border-top: none;

.mobile .main-inner, .mobile .footer-inner
background-color: #ffffff;

.mobile-index-contents
color: #222222;

.mobile-link-button
background-color: #2288bb;

.mobile-link-button a:link, .mobile-link-button a:visited
color: #ffffff;

.mobile .tabs-inner .section:first-child
border-top: none;

.mobile .tabs-inner .PageList .widget-content
background-color: #eeeeee;
color: #000000;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow
border-left: 1px solid #eeeeee;

–
gapi.load(“iframes-styles-bubble”, function()
if (window.iframes && iframes.open)
iframes.open(
‘//blogger.com/navbar.g?targetBlogID7529779039\46blogName\75Techno+Paper\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75technopaper.blogspot.com/search\46blogLocale\75en_GB\46v752\46homepageUrl\75technopaper.blogspot.com/\46targetPostID752173287961902976244\46blogPostOrPageUrl\75technopaper.blogspot.com/2008/02/all-about-extbutton.html\46vt754848259208762444073′,

container: “navbar-iframe-container”,
id: “navbar-iframe”
,

);

);
Techno Paper
Pages
Home
Contact
February 10, 2008
All about Ext.Button!
Labels:
ExtJS
I have already demonstrated the difference of ExtJS1.x and 2.0 with a simple “Hello World” program. Now let’s get deeper and this time it’s about buttons in ExtJS. In this article we will cover creating, handling and manhandling of Ext buttons.
Setting up your programming environment:
There isn’t much to this. If you do not have ExtJS 2.0, you need to download the latest version. All you have to do is unzip the downloaded file, place them in a proper folder structure. I usually have a folder structure as shown:
The js folder has all the JavaScript of the application. Inside this folder I have separate folders for different libraries and I store my custom JavaScript files in appjs. Again this appjs can have subfolders to separate JavaScript files module-wise. This might not be the best folder structure but for now we will stick to this. If you are new to Ext you can have a look at my “Hello World” program.
Ok! Now we are ready for some action. Let’s start with creating a simple button.
Creating a Button:
Ext has Button class implement in the base package ie, Ext. To create a button all you have to do is create an instance of this class and specify the attributes. The Button class has a parameterized constructor with one parameter, the button’s configuration!
Here is the code to create a simple button:buttonObject = new Ext.Button(applyTo:’button-div’,text:’Simple Button’);You will see that we have used two configuration parameters. applyTo is used to specify which HTML element is going to become the button. The HTML element can be DIV, P or SPAN tag. Remember that applyTo should be passed for the button to render. The next parameter is the text of the button itself. Now another way to specify the holding element for button can be done my calling the public method applyToMarkup. The method takes a parameter which is the id of HTML element to which the button will be rendered.
Attaching handlers to button:
There are basically three ways to attach event to the button you created. One is to use the constructor to specify a callback when the button is clicked and the other is to use addListner method. This method is more generic because you can specify action for any type of events on a button.
The first method is by using the constructor you specify the call back function that needs to invoke when the button is clicked. Remember: It’s only for handling button clicks. Have a look at the example below:buttonObject = new Ext.Button(applyTo:’button-div’,text:’Testing’,handler:buttonHandler);buttonHandler is a method defined in our application class as private method. Here is the complete application code:app = function()
var buttonObject;
var buttonHandler = function(button,event)
alert(‘You clicked the button!’);
;
return
init:function()
buttonObject = new Ext.Button(applyTo:’button-div’, text:’Testing’,
handler:buttonHandler);

;
();The second method is to use the setHandler method to set the call back method for click event. The method has only one argument and it’s the call back method.
The third method to attach an action is to use the public method addListener. Through this you will be able to define actions for events like clicking, mouse over, mouse out etc. Take a look at this examplebuttonNext = new Ext.Button(text:’Touch me’);
buttonNext.applyToMarkup(‘nxt-button’);
buttonNext.addListener(‘mouseover’,mouseHandler);The addListener method has four parameters out of which last two are optional. Thus in our above example, we have made use of just the feature of assigning action to certain events. The third argument specifies the scope in which the handler method should be executed and the last argument specifies the object containing handler configuration properties. These properties can be scope, delay etc.
Before we close, there is one more way to attach event handler to button. This can be done by calling on method. This method has the same number of parameters as the addListener method.
Firing and removing handlers:
ExtJS provides a good set of APIs to manipulate events and actions for any component. As its possible for developers to create and attach actions for button, its also possible to manually fire, stop and remove these event and action.
Situations arise wherein you need to fire an event or series of events when one components event is fired. To fire an event manually we have fireEvent method.
This method has variable length argument of which the first argument is the event name that needs to be fired and the rest is the parameters passed to the handler if any.Have a look at the example below:
app = function()
var buttonObject;
var buttonNext;
var buttonHandler = function(button,event)
alert(‘You clicked the button!’);
buttonNext.fireEvent(‘mouseover’);
;
var mouseHandler = function(button,event)
alert(‘Mouse on me!’);
;
return
init:function()
buttonObject = new Ext.Button(applyTo:’button-div’,
text:’Click me’,
handler:buttonHandler);
buttonNext = new Ext.Button(text:’Touch me’);
buttonNext.applyToMarkup(‘nxt-button’);
buttonNext.addListener(‘mouseover’,mouseHandler);

;
();Here we manually fire the ‘mouseover’ event for buttonNext when user clicks on the first button. Thus inturn, the mouseHandler of buttonNext is called.
Now, let’s remove handlers attached to the buttons. ExtJS provides two methods to remove a specific handler from an event. Developer as either use removeListener or un method (addListener and on for adding). And finally to remove all the handlers attached, you may call purgeListeners method.
Suspending and Resuming Events:
Adding, firing and removing is not all that. At times you may need to suspend the events so that the handlers are not fired. You can use suspendEvents and resumeEvents method to enable and disable the event firing for a component. For example:buttonNext.suspendEvents();This would suspend all event fired by buttonNext object.
Other Methods:
I am not explaining each function explicitly. But I am just covering the major once that a developer needs to know. For complete list of methods refer the Ext API Documentation.
Winding Up:
For a Ext beginner, I hope this will greatly helpful. Please let me know of any mistakes in this tutorial. You can download the final source code from here.
Read other articles and tutorials on ExtJS!
Email ThisBlogThis!Share to TwitterShare to Facebook
1 comment:
Fluid Foundation
said…
You sir, are a king among men. Thanks for the explanation.
February 13, 2008
Post a Comment
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
Follow by Email
Search This Blog
Loading…
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results *
color:#2288bb;

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited *
color:#888888;

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate
color: #777777;

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl
color: #2288bb;

#uds-searchControl .gsc-results
border-color: #eeeeee;
background-color: #ffffff;

#uds-searchControl .gsc-tabhActive
border-color: #eeeeee;
border-top-color: #eeeeee;
background-color: #ffffff;
color: #222222;

#uds-searchControl .gsc-tabhInactive
border-color: #eeeeee;
background-color: transparent;
color: #2288bb;

#uds-searchClearResults
border-color: #eeeeee;

#uds-searchClearResults:hover
border-color: #eeeeee;

#uds-searchControl .gsc-cursor-page
color: #2288bb;

#uds-searchControl .gsc-cursor-current-page
color: #222222;

Subscribe Techno Paper
Posts
Atom
Posts
Comments
Atom
Comments
Tags
Acropolis
Adobe
AIR
Ajax
Apache
Apollo
Application Server
ASP.NET
Backbase
Blogger
Business
C#
ColdFusion
CSS
Database
Decision Management
Dekoh
Documentum
Dojo
ExtJS
Firefox
Flex
flickr
General
GNOME
GNU
Google
Google Analytics
Google Pages
GPL
HTML
Internet
Java
Java Script
JavaFX
Jersey
Jimdo
jQuery
Licenses
Linux
LiveCycle
log4net
Management
Microsoft
Mobile
MVC
Open Source
OpenLaszlo
Operating System
Orbit
OSGi
PHP
Process
Programming
Recess
REST
RIA
Search Engine
Semantic Web
Sencha
Silverlight
Social Networking
Softwares
Spring
Spry
Struts
Utilities
VIT
WDK
Web 2.0
Web Service
Window 7
Windows Mobile
WPF/E
XML
Yahoo
Blog Archive
► 
2011
(7)
► 
February 2011
(3)
► 
January 2011
(4)
► 
2010
(13)
► 
December 2010
(1)
► 
June 2010
(3)
► 
May 2010
(3)
► 
March 2010
(3)
► 
February 2010
(3)
► 
2009
(15)
► 
December 2009
(3)
► 
November 2009
(2)
► 
June 2009
(2)
► 
May 2009
(1)
► 
April 2009
(1)
► 
March 2009
(4)
► 
January 2009
(2)
▼ 
2008
(38)
► 
December 2008
(1)
► 
November 2008
(4)
► 
October 2008
(1)
► 
September 2008
(3)
► 
August 2008
(2)
► 
July 2008
(2)
► 
June 2008
(2)
► 
May 2008
(5)
► 
April 2008
(6)
► 
March 2008
(5)
▼ 
February 2008
(3)
Implementing Section 508
All about Ext.Button!
jQuery introduces UI and Special effects
► 
January 2008
(4)
► 
2007
(88)
► 
December 2007
(4)
► 
November 2007
(4)
► 
October 2007
(3)
► 
September 2007
(6)
► 
August 2007
(6)
► 
July 2007
(10)
► 
June 2007
(11)
► 
May 2007
(19)
► 
April 2007
(14)
► 
March 2007
(5)
► 
February 2007
(4)
► 
January 2007
(2)
► 
2006
(24)
► 
December 2006
(4)
► 
November 2006
(3)
► 
October 2006
(4)
► 
September 2006
(1)
► 
June 2006
(12)
Techno Paper is licensed under a Creative Commons Attribution-Share Alike 2.5. Simple template. Powered by Blogger.

http://id.lenta.ru/profile/108850/