Ajax框架之EXT核心技术学习笔记(一)

来源：互联网发布：淘宝定制类目有多少家编辑：程序博客网时间：2024/05/18 19:43

下载Ext最新版：http://www.extjs.com/products/extjs/download.php

测试代码如下：

ExtDemo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtDemo</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="resources/jscript/ext-base.js"></script>
    <script type="text/javascript" src="resources/jscript/ext-all.js"></script>
    <script type="text/javascript" src="resources/jscript/extdemo.js"></script>
    <style type="text/css">
    .red {
        color: red;
    }
    </style>
</head>
<body>
<div id="demogrid">黄色高亮显示然后渐退</div>
</body>
</html>

extdemo.js

Ext.onReady(function(){
    
    var myDiv = Ext.get('demogrid');
    myDiv.highlight();      //黄色高亮显示然后渐退 
    myDiv.addClass('red');  //添加自定义CSS类 
    myDiv.center();         //在视图中将元素居中 
    myDiv.setOpacity(.50);  //使元素半透明 
});

请注意：

例如：

var myDiv1 = Ext.get('myDiv');

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

中，myDiv1 和myDiv2是不一样的，事实上，myDiv1.dom 与myDiv2一致。

当然，我们可以直接通过Ext.getDom（'myDiv'）来直接取得document对象。

中文资料：

http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_(Chinese)

http://extjs.com/learn/Ext_2_Overview_(Chinese)

http://www.ajaxjs.com/tutorial/