从官网下载了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. [android开发篇][android studio 和elipse都需要的流程 android sdk的安装

    第三步.下载并安装AndroidSDK 前面两步,我们已经配置了JDK变量环境,并安装好了Eclipse,通过这两步之后Java的开发环境就准备好了,如果我们只是开发普通的JAVA应用程序的话,那么到 ...

  2. Java&Android代码规范

    项目中直接导入Square的代码风格文件.(不导入Google的原因是Square同时提供了Java和Android两套统一风格,Google只提供了一套) Square Code Styles Go ...

  3. 【Luogu】P2680运输计划（树上差分+二分）

    题目链接 总体思路……怎么说呢……是个暴力吧…… 首先用倍增预处理出每条路径的长度. 然后按长度把路径排序. 然后二分答案.对于当前答案mid检验,怎么检验呢? 首先差分把所有长度比mid大的链上除了 ...

  4. FZU 2186 小明的迷宫 【压状dp】

    Problem Description 小明误入迷宫,塞翁失马焉知非福,原来在迷宫中还藏着一些财宝,小明想获得所有的财宝并离开迷宫.因为小明还是学生,还有家庭作业要做,所以他想尽快获得所有财宝并离开迷 ...

  5. Snmp的学习总结（一）

    摘自:http://blog.csdn.net/shanzhizi/article/details/11606767   目录(?)[-] SNMP的5种协议数据单元 SNMP的运行过程 11 Get ...

  6. android图片上传

    package com.example.center; import java.io.ByteArrayOutputStream;import java.io.InputStream; import ...

  7. sugar与阿龙的互怼（第一季）

    §   第一季 回家风波 高考了,啦啦啦~ 快要高考了,显然sugar很伤心. 显然不是因为快要考试了sugar才伤心的. 那为什么??? 因为他们都回家了,但是sugar和他的小伙伴们都不回家!!! ...

  8. 第1章 SpringBoot 简介

    一.什么是Spring Boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发 ...

  9. hadoop学习 的yarn

    Yarn的产生 mapReduc1.0 1单点故障 2扩展效率低 3资源利用率高 降低运维成本 方便数据共享 多计算框架支持 MapReduce Spark Storm Yarn的架构图 Yarn模块 ...

  10. iOS 内存管理实践

    内存管理实践 尽管基本的概念在内存管理策略文章中简单得阐述了,但是还有一些实用的步骤让你更容易管理内存:有助于确保你的程序最大限度地减少资源需求的同时,保持可靠和强大. 使用“访问器方法”让内存管理更 ...