zoukankan      html  css  js  c++  java
  • extjs 入门

    引用:http://extjs.org.cn/node/83

    1.2.1 下载ExtJs压缩包
    最新版本(截至2008-04-21):http://extjs.com/deploy/ext-2.0.2.zip

    1.2.2 解压ExtJs压缩包
    解压后的目录如下图所示,其中的demo为新建的目录。

    1.2.3 在demo文件夹中新建一个文件1.2a_helloword.html
    内容如下:

    01.<html>
    02.<head>
    03.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    04.<title>Hello World</title>
    05.<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    06.<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    07.<script type="text/javascript" src="../ext-all.js"></script>
    08.<script type="text/javascript">
    09.Ext.onReady(function(){   
    10.alert('Hello World!');
    11.});
    12.</script>
    13.</head>
    14.<body>
    15.</body>
    16.</html>

    用浏览器浏览这一个文件,如果看到下面这一个界面,恭喜你,你的第一个ExtJs完成了。
    演示地址:http://extjs.org.cn/extjs/demo/1.2a_helloword.html
    效果图如下:

    简单解释一下上面代码

    1.<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />


    这一个是引入ExtJs的默认样式

    1.<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    2.<script type="text/javascript" src="../ext-all.js"></script>


    ExtJs所需要的核心脚本全部都在这两个js文件中。

    1.<script type="text/javascript">
    2.Ext.onReady(function(){   
    3.//页面初始化代码
    4.});
    5.</script>


    Ext.onReady 是指在整个页面加载完后执行。

    1.3.4 绚丽效果的弹出框
    上面(1.3.3)只是告诉你环境配置成功了,下面我们来看一下ExtJs中的弹出框的效果。
    代码如下:

    01.<html>
    02.<head>
    03.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    04.<title>Hello World</title>
    05.<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    06.<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    07.<script type="text/javascript" src="../ext-all.js"></script>
    08.<script type="text/javascript">
    09.Ext.onReady(function(){   
    10.Ext.MessageBox.alert('Message''Hello World ! ');
    11.});
    12.</script>
    13.</head>
    14.<body>
    15.</body>
    16.</html>

    演示地址:http://extjs.org.cn/extjs/demo/1.2b_helloword.html
    效果图如下:

    只是有一句代码不同而已,但是效果却相差了十万八千里。

  • 相关阅读:
    使用Android自定义格式的定义Button
    Java Binary Search
    非常成功的人会做的八件事
    Ubuntu12.04 安装java
    NetBeans 时事通讯(刊号 # 125 Nov 17, 2010)
    NetBeans IDE 7.0 Beta 发布
    关于 IPv6 你需要知道的 10 件事
    开始学习 Go
    开始学习 Go
    Quartz 1.8.4 发布
  • 原文地址:https://www.cnblogs.com/sode/p/2649300.html
Copyright © 2011-2022 走看看