Extjs 入门小事例

最新推荐文章于 2019-10-03 20:50:28 发布

qingBYqing

最新推荐文章于 2019-10-03 20:50:28 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： EXT ITeye CSS UI HTML

本文链接：https://blog.csdn.net/qingBYqing/article/details/83890950

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.准备工作
1.下载类库：

官网：[url]http://www.sencha.com/products/extjs/[/url]

2.类库基本说明：

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

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

[img]http://dl.iteye.com/upload/attachment/462910/0ef19d90-2a0b-3cd4-bd14-1530c8927234.png[/img]

 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.[color=red] 注意路径问题:[/color] 上面的事例
我是把 helloWorld.html跟类库放到同一级目录的

[img]http://dl.iteye.com/upload/attachment/462956/fb3fd04b-32e9-3f7a-8fb0-1753e975ba07.png[/img]

qingBYqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 入门小事例

一.准备工作 1.下载类库：官网：[url]http://www.sencha.com/products/extjs/[/url] 2.类库基本说明：我下的版本是： ext-3.3.1.zip 解压后内部包过一下文件： ...
复制链接

扫一扫

专栏目录