教程:ExtJs 入门第一部分

Posted 周日, 05/10/2009 - 01:09 by admin

这教程对我有用吗？
如果你是一个资深的程序员，那不必了，我还是建议您不阅读这篇教程。何解？这里许多的概念尚不是为有经验的用户提供营养的，只是一些简单的概念，还不能有足够的知识深度来创建Web程序（其目的仅仅是用ExtJS实现页面特效而已，——为标准页面添加活泼的元素而写的教程）。

但若是：

我打算从零开始Ext
不清楚JavaScript是什么，其作用比较茫然，但是想来点实例来促进学习
如有比较吻合的情况，那这教程对你来说应该不错！

我创建了一个站点，站点里有许多演示和例子，而且在不断增加中，站点的连接就在本页中。

用链接来控制滑动文本
要演示的功能在日常的站点中很常见，做起来也简单， -因此把它变为介绍如何ExtJS使用的一个例子是不错的选择，也能说明问题。

本文的是以提取页面内的特定id的元素为入手（本文div的id为'slideme'），继而使用ExtJS自带方法，向上或向下滑动内部的div。

html页面
这里的东东大家就熟行熟路了，我们全部需要的div元素和文本就在这里： 

<!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>

开始写脚本
首先要保证脚步不会再DOM未建立之前就去访问DOM（图片此时是并行下载的），否则就会出现找不到元素的问题。为避免这个现象发生我们可使用Ext.onReeady方法，如下例： 
//make sure YOUR path is correct to this image!!
Ext.BLANK_IMAGE_URL = '../../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
});

注意脚本的第一行引用图片的路径，这样子做能够避免直接从ext网站上面下载该文件，从而加快下载页面的速度。

加入事件处理器（Event Handlers）
我们需要捕获html链接上的单击事件，这当中可能包含许多的事情，但是我想标志的鼠标单击，无疑是我们最感兴趣的！

可喜的是，ExtJS本身就为我们包办了所有兼容的工作，这样我们只要以一种的语法就可以完成工作了。 

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);
});

转过来中文就是：“当'textup'元素被单击，便会调用slideText函数，它有'up'和'slider'的参数送入，然后用ExtJS Fx的frame方法闪动'textup'元素”。

要注意的地方还有，匿名的处理函数有两个值被传入，供Ext.get()方法使用。——分别是'事件对象'和'事件目标'，有时比较有用，例如你想得知哪个元素被点击了，或者停止事件……其他将来会用到的功能。

'slide text down'链接也是差不多，只是我们改了一下参数，slideText执行起来的便是'down'的命令。

最后的'texttoggle'事件，其任务是发送一个参数，来调用'toggle'函数。

函数slideText
现在，我们用一个简单的函数，将ExtJS的FX中的slideIn，slideOut和toggle方法放在一起。这样我们会更高效地编程和复用代码，这里我们还要在某个位置上对元素的可见性进行检测。我们不想因为元素是否隐藏或'up'/'down'而浪费太多的资源。

我们会使用switch语句来测试送入的参数，相反，如使用大量的if...else则处理得很麻烦！ 

//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	
}

最后我们能够让ExtJs的方法工作起来了，这里的代码充其量是为了让我们最终的用户看起来更会好一些。

关于slideIn和slideOut方法
这里我不打算再多费唇舌，皆因我们使用了配置项的对象作为参数送入到方法中去，一目了然是什么，配置ExtJs的组件简直是小菜一碟。 

if (slideMe.isVisible()) {
 
    slideMe.slideOut('t', {
	easing: 'easeOut',
	duration: .5,
	remove: false,
	useDisplay: true
});
 
}

slideMe的类型是元素，正是我们想要移动的元素，当函数被调用的时候，元素就会作为参数被传入。我们使用isVisible()测试其可见性（我们已经把元素移到上面了？），如果是可见的，那么我们将元素送入到下一个选区，该动作由slideOut方法完成。注意't'，这事告诉特效的方向从元素的顶部开始（垂直方向开始）如果要换成往左边的也是很容易的，改为'l'便可。

这里我们选取'easeOut'的消除方式，消除的持续时间为半秒钟，并禁止完毕后在dom中删除，最后，指定使用'display'的显示模式，更好的在视图中将元素隐藏。该模式下，一旦元素隐藏周围的元素立即会占据其原来的位置，也就是我们所预期的动画效果。

总结
暂时为止你已经了解到ExtJS身上极具强大的威力是吧？是的！没错，就从这儿渐渐将Ext投入使用并逐渐累积，使得手中的知识只是越加牢固、扎实。我们这儿所做的并不复杂，但相信能让阁下有足够的信心继续进行实践，继而让Ext JS成为阁下手中的强兵利器，驯服的坐骑！

全部的脚本

//make sure YOUR path is correct!!
Ext.BLANK_IMAGE_URL = '../../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);
});
});

其他资源

  • 要发表评论，请先登录