从零开始Ext

最新推荐文章于 2024-02-03 21:42:32 发布

最新推荐文章于 2024-02-03 21:42:32 发布 · 166 阅读

文章标签：

#EXT #JavaScript #CSS #UP #脚本 #ViewUI

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文是以提取页面内的特定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>&nbsp;</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);
});
});