读书人

Extjs 入门小例证

发布时间: 2012-10-12 10:17:04 作者: rapoo

Extjs 入门小事例
一.准备工作
1.下载类库:

官网:http://www.sencha.com/products/extjs/

2.类库基本说明:

我下的版本是: ext-3.3.1.zip

解压后内部包过一下文件:



 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 world  examples -->     <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跟 类库放到同一级目录的


读书人网 >JavaScript

热点推荐