从官网下载了ExtJs的3.2版本号的SDK,包括了代码依赖的具体说明、文档、范例和其它文件。当中,adapter和resources文件是Ext正常执行所必须的,其它的仅在开发过程中使用到。

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

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

docs:文档中心(仅当执行在server上时可以正常訪问)

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

resources:Ext依赖的文件,比如CSS和图片

source:ext的全部代码

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

<html>
<head>
<title>ExtJs起步</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
</head>
<body>
<!--nothing in the body-->
</body>
</html>

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="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
Ext.Msg.alert('Beyole','Hello World');
});
</script>
</head>
<body>
<!--nothing in the body-->
</body>
</html>

程序截图:

效果还是非常好看的,并且这个对话框是能够任意拖拽的,当然仅仅限制在页面的区域内,由于这毕竟不是真正的对话框,而是一系列DIV标签和图片的组合模拟而成的。

这样以后写出的HTML的前台效果就非常好了。

ExtJs学习笔记(1)---ExtJs安装及其使用的更多相关文章

  1. PHP学习笔记----IIS7下安装配置php环境

    原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...

  2. openresty 学习笔记一:环境安装

    openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...

  3. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  4. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. extjs 学习笔记(二)

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  6. EXTJS学习笔记

    由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构?   推荐一篇文章: ...

  7. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  8. Python3学习笔记01-环境安装和运行环境

    最近在学习Python3,想写一些自己的学习笔记.方便自己以后看,主要学习的资料来自菜鸟教程的Python3教程和廖雪峰官方网站的Python教程. 1.下载 1)打开https://www.pyth ...

  9. 树莓派学习笔记——apt方式安装opencv

    0.前言     本文介绍怎样在树莓派中通过apt方式安装opencv.并通过一个简单的样例说明怎样使用opencv. 相比于源码方式安装opencv,通过apt方式安装过程步骤简单些,消耗的时间也少 ...

随机推荐

  1. NYOJ 219 An problem about date

    An problem about date 时间限制:2000 ms  |  内存限制:65535 KB 难度:2   描述 acm的iphxer经常忘记某天是星期几,但是他记那天的具体日期,他希望你 ...

  2. ps 批量杀死进程

    ps aux | grep xxx |awk '{print $2}'|xargs kill -9

  3. 【bzoj1532】[POI2005]Kos-Dicing 二分+网络流最大流

    题目描述 Dicing 是一个两人玩的游戏,这个游戏在Byteotia非常流行. 甚至人们专门成立了这个游戏的一个俱乐部. 俱乐部的人时常在一起玩这个游戏然后评选出玩得最好的人.现在有一个非常不走运的 ...

  4. 【bzoj4826】[Hnoi2017]影魔 单调栈+可持久化线段树

    题目描述 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄.每一个灵魂,都有着自己 ...

  5. BZOJ 1015: [JSOI2008]星球大战starwar【并查集】

    题目可以表述成:给定一个无向图G,每次删除它的一个点和与点相关的边集,每次询问该操作后图G的连通度(连通分量的个数).和上一题一样都是考察逆向思维,虽然删除点的做法不会,但是每次加点后询问连通度却是并 ...

  6. 洛谷P3760 - [TJOI2017]异或和

    Portal Description 给出一个\(n(n\leq10^5)\)的序列\(\{a_n\}(\Sigma a_i\leq10^6)\),求该数列所有连续和的异或和. Solution 线段 ...

  7. P1736 创意吃鱼法 (动态规划)

    题目描述 回到家中的猫猫把三桶鱼全部转移到了她那长方形大池子中,然后开始思考:到底要以何种方法吃鱼呢(猫猫就是这么可爱,吃鱼也要想好吃法 ^_*).她发现,把大池子视为01矩阵(0表示对应位置无鱼,1 ...

  8. 【DFS序+树状数组】BNUOJ 52733 Random Numbers

    http://acm.bnu.edu.cn/v3/problem_show.php?pid=52733 [题意] 给定一棵树,这棵树每个点都有一个点权,标号从0开始,0是根结点 修改操作: SEED ...

  9. 【kmp或扩展kmp】HDU 6153 A Secret

    acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] 给定字符串A和B,求B的所有后缀在A中出现次数与其长度的乘积之和 A和B的长度最大为1e6 方法一:扩展kmp ...

  10. Perl语言--一些关于赋值、引用的东西

    引用详解 一.定义引用有两种: 1.用斜线“\” 2.匿名引用 1.用反斜线的引用:数组.哈希.标量 数组的引用 my @array = (1,2,3); my $aref = \@array; 哈希 ...