起走时间

我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>和我一起学ExtJS——入门
和我一起学ExtJS——入门
    作者:威廉姆 来源: 发表时间:2008-01-08

 
 

先从官方下载Extjs 2.0http://www.extjs.com/

在页面上导入所需的JS和CSS资源文件

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
<style type="text/css">
    @import url("plugins/extjs/ext-2.0/resources/css/ext-all.css");
</style>
<script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
</head>
<body>
<div id="id1" style="border:1px solid red;height:200px;width:200px;">id1的范围,请用mouse 左键点击</div>
<div id="id2" style="border:1px solid red;height:200px;width:200px;">id2的范围,请用mouse 左键点击</div>


来一个实例,最常见的ID元素操作
传统的操作:

<script type="text/javascript">
    
var d=document.getElementById("id1");
    d.onclick
=function(){
        alert(
"你点击了id1");
    }


Extjs里的实现:

    var t=Ext.get('id2');
    t.center();
    t.on('click',
function(){
        alert(
"dfsdfsd");
        t.highlight();
    }
,this,
    
{single: false,
    delay: 
100}

    );
});
</script>
</body>
</html>


如果使用easyjweb就可以直接用以下代码了

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
$html.extjs2()
<title>跟我一起学Extjs——入门</title>
</head>
<body>
<div id="id1" style="border:1px solid red;height:200px;width:200px;">id1的范围,请用mouse 左键点

</div>
<div id="id2" style="border:1px solid red;height:200px;width:200px;">id2的范围,请用mouse 左键点

</div>
<script type="text/javascript">
Ext.onReady(
function(){
    
var t=Ext.get('id2');
    t.center();
    t.on('click',
function(){
        alert(
"dfsdfsd");
        t.highlight();
    }
,this,
    
{single: false,
    delay: 
100}

    );
}
);
</script>
<script type="text/javascript">
    
var d=document.getElementById("id1");
    d.onclick
=function(){
        alert(
"你点击了id1");
    }

</script>
</body>
</html>

 

 
 

(阅读 )   评论数(:1)
评论】 【收藏】
评论:共1条
呵呵,还是没入门啊!
评论人: 匿名用户     评论时间: 2008-01-08 16:59:17

发表评论:
发表人:
评论: 
    
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率