首页 > 代码库 > ExtJs学习笔记(1)---ExtJs安装及其使用

ExtJs学习笔记(1)---ExtJs安装及其使用

2024-07-06 17:38:27   226人阅读

从官网下载了ExtJs的3.2版本的SDK，包含了代码依赖的详细说明、文档、范例和其他文件。其中，adapter和resources文件是Ext正常运行所必须的，其他的仅在开发过程中使用到。

Adapter：支持把Ext和其他代码库一同使用的文件

build：用于自定义构建ext-all.js的文件

docs：文档中心（仅当运行在服务器上时能够正常访问）

examples：大量令人印象深刻富有洞察力的范例

resources：Ext依赖的文件，例如CSS和图片

source：ext的所有代码

在使用Ext之前，我们需要现在页面中引入Ext的库文件，为了达到这个目的，我们需要在HTML页面的head标签区域内引入刚才下载的SDK文件。

<html>
<head>
<title>ExtJs起步</title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"lib/extjs/resources/css/ext-all.css" />>Ext文件的引用路径必须是正确的，并且是HTML页面的相对路径。这些文件必须依赖一下的顺序一次引入。
1.ext-all.css  Ext中主要的CSS文件
2.外部JS库文件 如果有需要可以引入
3.ext-base.js Ext代码库的“适配器”
4.ext-all.js或者ext-all-debug.js 主要的Ext代码库文件
5.在这个位置引入主题文件，也可以在Ext主要的CSS文件引入后的任意位置引用。

前提知识已经准备完毕了，开始进行我们的第一个ExtJs页面的编写了。
<html>
<head>
<title>ExtJs起步</title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"lib/extjs/resources/css/ext-all.css" />>
程序截图：
效果还是很好看的，而且这个对话框是可以随意拖拽的，当然只限制在页面的区域内，因为这毕竟不是真正的对话框，而是一系列DIV标签和图片的组合模拟而成的。这样以后写出的HTML的前台效果就很好了。


联系
我们