起走时间

我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>和我一起学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>

 

 
 

(阅读 )   评论数(:11)
评论】 【收藏】
评论:共11条
呵呵,还是没入门啊!
评论人: 匿名用户     评论时间: 2008-01-08 16:59:17
什么嘛
评论人: 什么鸟啊     评论时间: 2011-10-21 17:11:58
看不清楚
评论人: 匿名用户     评论时间: 2012-09-21 13:18:11
A pleasingly rational asnwer. Good to hear from you.
评论人: KCWzJqAlCtUqc     评论时间: 2013-01-16 21:14:19
cxiQqy  <a href="http://ilsywxxohbff.com/">ilsywxxohbff</a>
评论人: HOzBZLDBak     评论时间: 2013-01-18 21:17:46
yhX5tx , [url=http://sruarthpopwx.com/]sruarthpopwx[/url], [link=http://ktqrqpykatvt.com/]ktqrqpykatvt[/link], http://wzrwkravtukb.com/
评论人: DBlXEHqJEqpIVhxdLHc     评论时间: 2013-01-19 03:43:01
Big help, big help. And superlaivte news of course.
评论人: YdtjQKXiZo     评论时间: 2013-02-28 12:22:27
r2oUd8  <a href="http://oorrclhxqtgi.com/">oorrclhxqtgi</a>
评论人: HrxoHojaIPLihhw     评论时间: 2013-03-01 11:26:40
UwAEKC , [url=http://srfcfbssrhiw.com/]srfcfbssrhiw[/url], [link=http://arnbxuonjlgc.com/]arnbxuonjlgc[/link], http://kgpyituzpmhg.com/
评论人: SGijxYrMWdQ     评论时间: 2013-03-03 08:36:51
wyHvMd  <a href="http://hkthbjdoibyi.com/">hkthbjdoibyi</a>
评论人: hrMiWtBgZLfc     评论时间: 2013-03-04 19:10:58
Xi2RdI , [url=http://ocjvqpuxymaq.com/]ocjvqpuxymaq[/url], [link=http://vzgisgpraiuv.com/]vzgisgpraiuv[/link], http://zrskmmknymyj.com/
评论人: qKhPWvlBAKQzG     评论时间: 2013-03-05 02:54:38

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

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