Extjs 入门小事例

qingBYqing · 发表于 2013-2-7 15:34:49

一.准备工作
   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>                 <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>           <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>           <script type="text/javascript" src="ext/ext-all.js"></script>     <script type="text/javascript" src="/ext/src/localeext-lang-zh_CN.js"></script>              <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跟类库放到同一级目录的

		自动登录	找回密码
密码			立即注册