EXT基础－元素滑动（Easy Ext - Page Basics -> Sliding Elements ）
This tutorial is for Ext version 2.0.
A complete demonstration is at EasyExt.
Is this tutorial for me?
If you are a seasoned programmer then no, I suggest that this is not the page for you, many of the concepts shown will be too basic and as almost all of them are aimed at non application usage (and by this I mean using ExtJs to add interactivity and 'goodness' to a pretty much standard page).
However, if:
- you want to start with ExtJs at a very basic level or..
- have very little javascript knowledge - but want some instant results..
This is probably going to be ideal for you!
I have created a website with a growing number of demonstrations and examples with code in them, the link is above on this page.
Lets make some sliding text that is activated by a link.
This feature is very common on most websites now, and whilst easy to do - stands as a good example of how basic and easy it can be to do a simple effect using ExtJs.
This tutorial is going to simply identify an id of an element on the page (in this case a div with an id of 'slideme') and by using a built in ExtJs method, slide it up and down underneath another div.
The html page.
Nothing too much to fret about here, a simple page with a few divs and some text is about all we need.
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<
html
lang
="en"
>
<
head
>
<
meta
http-equiv
="content-type"
content
="text/html; charset=iso-8859-1"
>
<
title
>
Sliding Text
</
title
>
<!--
Bring in the ExtJs Libraries and CSS
-->
<
link
rel
="stylesheet"
type
="text/css"
href
="/ext-2.0.2/resources/css/ext-all.css"
/>
<
script
type
="text/javascript"
src
="/ext-2.0.2/adapter/ext/ext-base.js"
>
</
script
>
<
script
type
="text/javascript"
src
="/ext-2.0.2/ext-all.js"
>
</
script
>
<!--
Place the page specific js here
-->
<
script
type
="text/javascript"
src
="slidingtext.js"
>
</
script
>
<!--
End page specific js
-->
<!--
Some quick CSS
-->
<
style
type
="text/css"
>
<!--
.click_div {}{
background-color: #CC00CC;
padding: 20px;
}
-->
</
style
>
</
head
>
<
body
>
<
h2
>
Try it out!
</
h2
>
<
ul
>
<
li
><
a
id
="textup"
href
="javascript:;"
>
Slide some Text UP
</
a
></
li
>
<
li
><
a
id
="textdown"
href
="javascript:;"
>
Slide some Text DOWN
</
a
></
li
>
<
li
><
a
id
="texttoggle"
href
="javascript:;"
>
Show/Hide some Text (using a Toggle)
</
a
></
li
>
</
ul
>
<
p
>
</
p
>
<!--
Run out some divs to play with
-->
<
div
class
="click_div"
id
="div1"
>
I am a div with an ID of 1, and the content under should slide up and down.
</
div
>
<
div
id
="slider"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede
</
div
>
<
div
class
="click_div"
id
="div2"
>
I am a div too - hello!
</
div
>
<
div
id
="noslide"
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare fringilla ante. Sed auctor. Donec gravida interdum tellus. Aliquam vehicula mauris dapibus arcu. Phasellus nibh velit, hendrerit a, adipiscing vitae, eleifend quis, libero. Fusce eleifend iaculis erat. Suspendisse rhoncus nisi in arcu. Ut non augue. Ut consequat vehicula elit. Mauris quam. Vivamus iaculis, magna varius ornare porta, nulla diam venenatis libero, vel mattis dui pede vel dui. Praesent dapibus mauris non neque. Suspendisse eget orci. Suspendisse at nisl. Nam mauris dolor, mollis ut, mollis at, semper quis, augue. Morbi ornare. In eu mi non libero porttitor pharetra. Nullam sagittis vulputate orci. In eget sem quis nibh dignissim dignissim. Mauris in pede
</
div
>
</
body
>
</
html
>
Start the script.
First we need to make sure that the script doesn't try to access the DOM elements until its all loaded (apart from images) and ready to go. In order to achieve that we use the Ext.onReady() method like this.
//make sure YOUR path is correct to this image!! Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/ext-2.0.2/resources/images/default/s.gif'; //this runs on DOM load - you can access all the good stuff now. Ext.onReady(function() { //we put all our code here });
Note that we included a path to an img file at the top of the script, do this to avoid pulling this file directly from the ExtJs servers - not doing this can slow things down a bit.
Now add our Event Handlers
In order to do anything we need to capture the click on our link in the html page, this can be many things - but I would imagine that the standard mouse click is by far and away the one we are interested in!
Luckily ExtJs comes up trumps by cutting down all the guesswork and stress by condensing this into 1 call.
Ext.get('textup').on('click',function(e,t){ //simple slide of this element slideText('up','slider'); Ext.get(t.id).frame('cccccc',1); }); Ext.get('textdown').on('click',function(e,t){ //simple slide of this element slideText('down','slider'); Ext.get(t.id).frame('cccccc',1); }); Ext.get('texttoggle').on('click',function(e,t){ //simple toggle of this element slideText('toggle','slider'); Ext.get(t.id).frame('cccccc',1); });
This can be broken down in English like this: "When the element 'textup' is clicked upon, call the slideText function with parameters of 'up' and 'slider' and then flash 'textup' using an ExtJs FX method called 'frame'".
You will note that 2 values are passed to the anonymous function from the Ext.get().on handler - these are very useful and represent the 'event' and the 'target' so you can then do things like stopping the event from further detection in your script and most useful you get to know what element was clicked (t).
The 'slide text down' link is very similar except that we change the parameter that we are going to send to the mini function slideText is of course 'down'.
Finally we have the 'texttoggle' event handler which also sends a parameter to the slideText function of 'toggle' - I think a pattern is developing here :)
The slideText function.
Now we need a simple function that wraps up the ExtJx FX methods slideIn,slideOut and toggle. By doing this we are being efficient coders and re-using code, we are also going to put some logic in place here by testing the visibility of the element. We don't want to ruin the effect by not checking first to see of the element is hidden or 'up' and vice versa.
We'll use a switch statement to test the inbound parameters as its much tidier than lots of if's and else's!
//simple function to slide text up and down and optionally hide.. var slideText = function(direction,element){ var slideMe = Ext.get(element); switch(direction){ //determine the direction of travel case 'up' : //lets check to see if this is visible and if not //then its already hidden. if (slideMe.isVisible()) { //if we get here then the element is visible slideMe.slideOut('t', { easing: 'easeOut', duration: .5, remove: false, useDisplay: true }); } break; case 'down' : //lets check to see if this is visible and if //it is then we do nothing. if (!slideMe.isVisible()) { //if we get here then the element is visible slideMe.slideIn('t', { easing: 'easeOut', duration: .5 }); } break; default : //the default action is simply to toggle the element slideMe.toggle(); break } //ends the slider function }
We finally got to the ExtJs methods that do the work here, most of this code is simply wrapping to make the experience for our user a nice one.
About the slideIn and slideOut methods.
I won't labour this here, suffice to say that we employ a config option to add parameters to these methods, this is a really easy way to configure ExtJs components.
if (slideMe.isVisible()) { slideMe.slideOut('t', { easing: 'easeOut', duration: .5, remove: false, useDisplay: true }); }
slideMe is an element that we wish to move, we passed this to the function when we called it. We test its visibility (ie: have we already slid it up?) by using the ExtJs method isVisible(), if its visible we then pass into the next section which instructs slideOut() to do its stuff. Note the 't' - this tells slideOut to apply the effect to the top centre edge of the element (vertically upward) - we could have as easily used 'l' and gone left.. its that easy!
Using the config structure we can tell slideOut what we want it to do, here we have chosen to use 'easeOut' easing, to make the whole effect last half a second, not to remove it from the DOM afterwards and finally to use 'display' mode so that we effectively hide it from view - this mode will move the other elements around our target element to fill the place where it was - giving us a most satisfactory animation effect.
Summing Up
By now you will have seen that ExtJs does contain a heap of cool stuff which you can start to use and grow your knowledge into something entirely more sophisticated, what we have done here is not complicated, but will give you instant gratification and may encourage you to experiment a little and start to use ExtJs as a tool in your developers kitbag.
The Complete Script.
//
make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL
=
'
http://www.cnblogs.com/ext-2.0.2/resources/images/default/s.gif
'
;
//
this runs on DOM load - you can access all the good stuff now.
Ext.onReady(
function
()
{
//simple function to slide text up and down and optionally hide..
var slideText = function(direction,element){
var slideMe = Ext.get(element);
switch(direction){
//determine the direction of travel
case 'up' :
//lets check to see if this is visible
//and if not then its already hidden :)
if (slideMe.isVisible()) {
//if we get here then the element is visible
slideMe.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: true
});
}
break;
case 'down' :
//lets check to see if this is visible and
//if it is then we do nothing :)
if (!slideMe.isVisible()) {
//if we get here then the element is visible
slideMe.slideIn('t', {
easing: 'easeOut',
duration: .5
});
}
break;
default :
//the default action is simply to toggle the element
slideMe.toggle();
break
}
//ends the slider function
}
Ext.get('textup').on('click',function(e,t){
//simple slide of this element
slideText('up','slider');
Ext.get(t.id).frame('cccccc',1);
});
Ext.get('textdown').on('click',function(e,t){
//simple slide of this element
slideText('down','slider');
Ext.get(t.id).frame('cccccc',1);
});
Ext.get('texttoggle').on('click',function(e,t){
//simple toggle of this element
slideText('toggle','slider');
Ext.get(t.id).frame('cccccc',1);
});
}
);
//
make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL
=
'
http://www.cnblogs.com/ext-2.0.2/resources/images/default/s.gif
'
;
//
this runs on DOM load - you can access all the good stuff now.
Ext.onReady(
function
()
{ //simple function to slide text up and down and optionally hide..var slideText = function(direction,element){ var slideMe = Ext.get(element); switch(direction){ //determine the direction of travel case 'up' : //lets check to see if this is visible //and if not then its already hidden :) if (slideMe.isVisible()) { //if we get here then the element is visible slideMe.slideOut('t', { easing: 'easeOut', duration: .5, remove: false, useDisplay: true }); } break; case 'down' : //lets check to see if this is visible and //if it is then we do nothing :) if (!slideMe.isVisible()) { //if we get here then the element is visible slideMe.slideIn('t', { easing: 'easeOut', duration: .5 }); } break; default : //the default action is simply to toggle the element slideMe.toggle(); break }//ends the slider function } Ext.get('textup').on('click',function(e,t){ //simple slide of this element slideText('up','slider'); Ext.get(t.id).frame('cccccc',1);}); Ext.get('textdown').on('click',function(e,t){ //simple slide of this element slideText('down','slider'); Ext.get(t.id).frame('cccccc',1);}); Ext.get('texttoggle').on('click',function(e,t){ //simple toggle of this element slideText('toggle','slider'); Ext.get(t.id).frame('cccccc',1);});}
);