小毅学EXT之-------啥是ext？

可爱的小毅 — Thu, 05 Mar 2009 02:55:00 GMT

提问一：啥是ext？
ext是一套JS框架，他可以创建RIA富客户端程序，可以像cs架构中的桌面应用那样，界面丰富多线夺目炫丽，ajax遍地都是，即点即改，提高用户体验,一个字---爽。
HelloWord程序

<html>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js">script>
<script type="text/javascript" src="ext-all.js">script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('EXT欢迎你', '为你开天辟地');

});
script>
<title>Application Layout Tutorialtitle>
head>
<body>
body>
html>

引入ext的必备三个文件
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js">script>
<script type="text/javascript" src="ext-all.js">script>

我们平时要获取一个HTMl文档里的节点, 该怎么做?

var myDiv = document.getElementById('myDiv');

　　没错, 这样会工作的很好, 而且现在大多数人也是这样来搞的, 但是这样在页面里一个两个可以, 多了就会很头疼, 于是乎YUI-Ext给我们想到了一个简单的方法.

Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});

　　简单吧(如果用Prototype.js里的语法更简单^_^).这样就可以得到一个id为myDiv的元素, 然后把他的引用赋值给变量myDiv, 这以后, 你就可以对这个div进行操作了, 比如:

myDiv.highlight();// 这个元素的背景色会从高亮的黄色渐渐淡出.
myDiv.addClass('red');// 加入一个自定义的CSS样式类 (在 ExtStart.css 里面定义)
myDiv.center();// 在浏览器里居中这个元素
myDiv.setOpacity(.25);// 给这个元素加上25%的半透明效果

　　现在我们知道怎样通过元素的ID来选择一个元素, 下面我们看看怎么选择一批元素.

Ext.select('p').highlight();

　　高亮所有标签为P的元素. 通过这个例子你就可以看到, 我们来选择页面上的一批元素有多么简单, Ext为我们提供了一个接口, 通过这个接口我们可以来获取一批想要的元素, 并为他们设置属性, 不用循环, 不用遍历每一个元素.仅仅这些, 还不够, Javascript是用事件来驱动的, 我们呢, 就来看看怎样响应一个事件

Ext.onReady(function() {
    Ext.get('myButton').on('click', function(){
        alert("You clicked the button");
    });
});

　　这样就为页面里ID为myButton的按钮加上了一个click事件, 触发这个时间以后会弹出一个提示框. 嘿嘿, 有没有发现, 我们不用再在页面里的元素上, 写上一个 onclick='showMessage', 然后在去JS里面, 写上一个showMessage函数了. 我们再来给所有的P标签都加上单击事件, 方法同上

Ext.onReady(function() {
    Ext.select('p').on('click', function() {
        alert("You clicked a paragraph");
    });
});

　　通过上面两个例子, 我们可以看到, 我们可以把一个事件处理用很简单的方式定义在一行里, 不用给出函数名称, 只写上函数体, 就是所谓的匿名函数, 同样我们也可以在另外的地方写出一个函数, 然后把函数赋值给一个变量, 我们再在这里来使用它.

Ext.onReady(function() {
    var paragraphClicked = function() {
        alert("You clicked a paragraph");
    }
    Ext.select('p').on('click', paragraphClicked);
});

　　这次我们先实现了一个函数, 然后赋值给paragraphClicked, 在事件调用的时候我们把这个句柄传了进去, 这样也可以实现事件的相应^_^.我们再来看看他还能干什么.

Ext.onReady(function() {
    var paragraphClicked = function(e) {
        var paragraph = Ext.get(e.target);
        paragraph.highlight();
    }
    Ext.select('p').on('click', paragraphClicked);
});

　　在所有的P标签上单击的时候, 都会高亮这个段落, 然后在淡出, 酷吧..下面我们再来看看更酷的, 消息框的使用.我们在上面的高亮语句下面再加上几句

var paragraph = Ext.get(e.target);
    paragraph.highlight();

    Ext.MessageBox.show({
        title: 'Paragraph Clicked',
        msg: paragraph.dom.innerHTML,
        width:400,
        buttons: Ext.MessageBox.OK,
        animEl: paragraph
    });

可爱的小毅 2009-03-05 10:55 发表评论

BlogJava-小毅的遐想-文章分类-EXT

小毅学EXT之-------啥是ext？