Extjs 入门小事例
一.准备工作1.下载类库：
官网：http://www.sencha.com/products/extjs/
2.类库基本说明：
我下的版本是： ext-3.3.1.zip
解压后内部包过一下文件：
http://dl.iteye.com/upload/attachment/462910/0ef19d90-2a0b-3cd4-bd14-1530c8927234.png
adapter: 提供Ext的底层库 docs :API 帮助文档 exmaples: 提供使用Extjs的小事例 resoures: Ext UI资源文件目录 比如 图片 ，CSS等等 source :无压缩Ext 全部的源码 ext-all.js ：压缩后的Ext 全部源码 ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。
二.代码事例：
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>Ext hello World</title> <!-- 引入 ext 文件样式--> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/> <!-- 引入 extjs基础库--> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <!-- 引入 extjs 核心库--> <script type="text/javascript" src="ext/ext-all.js"></script> <!-- 引入 Extjs 汉化--> <script type="text/javascript" src="/ext/src/localeext-lang-zh_CN.js"></script> <!-- Extjs hello worldexamples --> <script > function fn(){ alert("我要开始学习EXTjs了"); } //ext 第一种方式的调用 Ext.onReady(fn); //ext 第二种方式调用 Ext.onReady(function(){ alert("我这样也可以哦"); }); //ext 中的消息框！ Ext.onReady(function(){ Ext.MessageBox.alert("消息盒子"," 你看我是不是很漂亮呢"); }); //ext 中的窗口 Ext.onReady(function(){ var win=new Ext.Window( { title:" 我的第一个小窗口！", width: 200, height: 400, html:'<h1>你看我这个ext小窗口怎么样啊，是不是可以啊！</h1>' } ); win.show(); }); </script> </head><body ><h1>Ext hello world</h1></body></html>
三.测试：
效果自己看吧！
四.心得
1. 基本理解了 ext 是干什么用的
2.在应用类库的时候 注意 路径问题
3. 注意路径问题: 上面的事例
我是把 helloWorld.html跟 类库放到同一级目录的
http://dl.iteye.com/upload/attachment/462956/fb3fd04b-32e9-3f7a-8fb0-1753e975ba07.png
页:
[1]