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为新建的目录。

引用: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
效果图如下:

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

相关文章
|
5天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。
2362 16
|
23天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
34940 57
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
17天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
15754 46
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
13天前
|
人工智能 JavaScript Ubuntu
低成本搭建AIP自动化写作系统:Hermes保姆级使用教程,长文和逐步实操贴图
我带着怀疑的态度,深度使用了几天,聚焦微信公众号AIP自动化写作场景,写出来的几篇文章,几乎没有什么修改,至少合乎我本人的意愿,而且排版风格,也越来越完善,同样是起码过得了我自己这一关。 这个其实OpenClaw早可以实现了,但是目前我觉得最大的区别是,Hermes会自主总结提炼,并更新你的写作技能。 相信就冲这一点,就值得一试。 这篇帖子主要就Hermes部署使用,作一个非常详细的介绍,几乎一步一贴图。 关于Hermes,无论你赞成哪种声音,我希望都是你自己动手行动过,发自内心的选择!
3029 29
|
2天前
|
云安全 人工智能 安全
|
2天前
|
人工智能 测试技术 API
阿里Qwen3.6-27B正式开源:网友直呼“太牛了”!
阿里云千问3.6系列重磅开源Qwen3.6-27B稠密大模型!官网:https://t.aliyun.com/U/JbblVp 仅270亿参数,编程能力媲美千亿模型,在SWE-bench等权威基准中表现卓越。支持多模态理解、本地部署及OpenClaw等智能体集成,已开放Hugging Face与ModelScope下载。
|
1天前
|
机器学习/深度学习 缓存 测试技术
DeepSeek-V4开源:百万上下文,Agent能力比肩顶级闭源模型
DeepSeek-V4正式开源!含V4-Pro(1.6T参数)与V4-Flash(284B参数)双版本,均支持百万token上下文。首创混合注意力架构,Agent能力、世界知识与推理性能全面领先开源模型,数学/代码评测比肩顶级闭源模型。
1228 6
下一篇
开通oss服务