EXT学习笔记——1 | 易学教程

应用ExtJS需要在页面文件中引入extjs的式样文件及库文件。

　　式样文件为resouces/css/ext-all.css

　　extjs的库文件主要有三个:adapter/ext/ext-base.js　　ext-all.js(ext-all-debug.js) 和 ext-lang-zh_CN.js

　　　　其中ext-base.js表示框架基础库,ext-all.js是压缩过的extjs的核心库，。Adapter表示适配器，也就是说可以有多种适配器。因此可以把adapter/ext/ext-base.js换成adapter下面的其他类库，如：adapter/jquery/ext-jquery-adapter.js 或者adapter/prototype/ext-prototype/ext-prototype-adapter.js 等。

总的来说，要使用ExtJS框架的页面中一般需要引入如下文件：

<!-- ext样式库 -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>

<!-- ext核心类库 -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="ext/ext-all-debug.js"/>

<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script>

在ExtJS的库文件及页面文件加载完毕后，ExtJS会执行Ext.OnReady中指定的函数，因此，一般情况下，每个ExtJS应用都是从Ext.OnReady开始的。使用Ext应用程序的代码如下：

<script type="text/javascript">

    function fn(){
    alert("Ext类库已加载");
    }

    Ext.onReady(fn);

</script>

函数fn也可以写成一个匿名函数的形式。因此，上面的代码可以改写成下面的形式:

<script type="text/javascript">

    Ext.onReady(function fn(){
        alert("Ext类库已加载");
    });

</script>

最后，总结一下，最简单的ExtJS的完整代码：

<html>
	<head>
  		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  		<!-- ext样式库 -->
		<link rel="stylesheet" type="text/css" href="ext-all.css"/>

		<!-- ext核心类库 -->
		<script type="text/javascript" src="ext-base.js"></script>
		<script type="text/javascript" src="ext-all-debug.js" ></script>
                <script type="text/javascript" src="ext-lang-zh_CN.js" charset="utf-8"></script>

    		<title>第一个EXT</title>
 
 		<script type="text/javascript">

    		Ext.onReady(function() {
			alert("恭喜!  你已成功配置EXT!");
		});

		</script>

	</head>

	<body></body>
</html>

如果一切顺利，效果会像下图所示：

例子下载地址：http://www.rayfile.com/zh-cn/files/2fcde9c7-b9b6-11e0-bc11-0015c55db73d/

上述例子在IE8下运行良好。注意，要允许脚本运行。

来源：https://www.cnblogs.com/dohiayan/archive/2011/07/29/2120983.html

标签

ext

脚本