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

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

相关文章
|
6月前
|
人工智能 自然语言处理 PyTorch
Instella:AMD开源30亿参数语言模型!训练效率碾压同级选手
Instella是AMD推出的30亿参数开源语言模型,基于自回归Transformer架构,支持多轮对话、指令跟随和自然语言理解,适用于智能客服、内容创作和教育辅导等多个领域。
117 1
|
6月前
|
人工智能 算法 调度
实时云渲染助力全息影像突破终端算力瓶颈
全息技术、体积视频与高斯溅射是三维动态内容实时生成与传输的关键技术,但硬件成本、数据量大及多终端适配等问题制约其发展。实时云渲染成为关键解决方案,通过云端GPU资源池化与弹性调度,大幅降低算力门槛。LarkXR平台整合动态捕捉与AI算法,实现毫米级精度的三维重建,并优化传输架构,解决弱网环境下的延迟与带宽问题。在体育赛事、虚拟时尚及全息演唱会等领域,LarkXR助力开发者打造沉浸式体验,如NBA全息战术、巴黎高定秀场和虚拟偶像演唱会,推动全息技术从专业领域走向大众消费场景,开创全新商业价值。
|
10月前
|
算法 网络协议 数据挖掘
阿里云通用算力型U1实例性能、适用场景、与经济型e区别、收费标准参考
在阿里云目前的活动中,通用算力型u1实例是一款价格相对较低且性价比较高的实例规格,通用算力型Universal实例(U实例)能提供均衡的计算、内存和网络资源,支持多种处理器和多种处理器内存配比。该类型实例依托阿里云资源池化技术和智能调度算法进行动态资源管理,为您的应用提供持续的算力保障、稳定性保障、供应及弹性保障,可以满足大多数场景下的应用需求,是一款具有高性价比的企业级实例。本文为大家介绍通用算力型U1实例的性能、适用场景、收费标准,以及和经济型e实例的区别,以供参考。
|
存储 安全 芯片
封装之打线简介
介绍封装打线的原理,常用材料的优缺点,关键部件,wire bonding 过程,主要参数,线形,线长和主要测试方法。
13024 3
封装之打线简介
|
Java 测试技术 开发工具
|
存储 安全 双11
数据安全最佳实践(2):数据脱敏白名单的使用
我们已经了解到在Dataphin中利用数据安全能力对敏感数据进行保护,可以确保对外展示的数据都是脱敏的。那么是不是脱敏之后就永远无法看到敏感数据了?在一些必须要要小范围公开数据的时候,该怎么办呢?这时候就要用到脱敏白名单的能力了。
数据安全最佳实践(2):数据脱敏白名单的使用
|
Java 测试技术 Shell
Android Monkey原理探讨
## 0x0 概述 本文不涉及如何使用[monkey](https://developer.android.com/studio/test/monkey.html),官网说得够详细了,网上资料也一大堆。本文着重探讨monkey的实现原理,以及基于这些原理,我们可以做些什么?本文涉及的Monkey的源码位于AOSP的[development](https://android-review.goog
6865 0
|
JavaScript 大数据 Java
(ElasticsSearch学习)歌词检索Demo的实现:一. 爬取歌词信息,写入ES
一个ElasticSearchDemo,讲解如何使用Jsoup爬取歌词数据写入阿里云Elasticsearch,并搭建Web框架实现歌词的全文检索。
4145 0