ExtJS 初体验第一个helloword demo

最新推荐文章于 2019-09-27 11:37:02 发布

q4828222

最新推荐文章于 2019-09-27 11:37:02 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏：系统运维

本文链接：https://blog.youkuaiyun.com/q4828222/article/details/49861271

15 篇文章

订阅专栏

本文介绍了如何使用ExtJS快速创建简单的网页应用，从基本的Hello World示例到实现弹出框效果，通过一步步的代码解析，让读者轻松掌握ExtJS的基础用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习ExtJS，时间比较紧张，所以就自己没写ExtJS的博文了，转载了一个达人的，写的很详细！保存

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
内容如下：


   

   

   

   Hello World
  

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

   

   

   

   

   

    


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

简单解释一下上面代码

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

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

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

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

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


   

   

   

   Hello World
  

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

   

   

   

   

   

   


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

阅读(2039) | 评论(0) | 转发(0) |

ExtJS 初体验 第一个helloword demo