ExtJs学习笔记(1)---ExtJs安装及其使用
从官网下载了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安装及其使用的更多相关文章
- PHP学习笔记----IIS7下安装配置php环境
原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...
- openresty 学习笔记一:环境安装
openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- extjs 学习笔记(二)
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- EXTJS学习笔记
由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构? 推荐一篇文章: ...
- 学习笔记--Grunt、安装、图文详解
学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...
- Python3学习笔记01-环境安装和运行环境
最近在学习Python3,想写一些自己的学习笔记.方便自己以后看,主要学习的资料来自菜鸟教程的Python3教程和廖雪峰官方网站的Python教程. 1.下载 1)打开https://www.pyth ...
- 树莓派学习笔记——apt方式安装opencv
0.前言 本文介绍怎样在树莓派中通过apt方式安装opencv.并通过一个简单的样例说明怎样使用opencv. 相比于源码方式安装opencv,通过apt方式安装过程步骤简单些,消耗的时间也少 ...
随机推荐
- Jmeter性能指标分析-下载了服务器监控插件的各个组件的功能介绍
1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在setting中可以设置时间间隔以及其他的参数 2.jp@gc - ...
- Webstrom卡顿问题解决
1.设置node_modules 打开项目,新建node_modules空文件夹,然后右击选择Mark Directory as,选择Excluded. 2.设置ingore文件 files-> ...
- PHP 接入支付宝即时到账功能
首先请到支付宝那边申请一个及时到账的接口账户,需要提交相关材料申请.然后根据即时到账的API文档进行接入.API文档提供了各种语言版本的demo,我这里是下的php版demo,然后再进行相关修改操作. ...
- Linux 文件/文件夹重命名
mv命令既可以重命名,又可以移动文件或文件夹. 例子:将目录A重命名为Bmv A B 例子:将/a目录移动到/b下,并重命名为cmv /a /b/c 其实在文本模式中要重命名文件或目录,只需要使用mv ...
- JS 调用存储过程传递参数
引用 #region 程序集 Newtonsoft.Json.dll, v4.5.0.0 // E:\Newtonsoft.Json.dll #endregion public DataTable R ...
- 【NOI2012】骑行川藏
获得成就:第一次在信竞做神仙数学题 先放个前言,$OI$ 出大型数学题还是比较麻烦的,因为主要是考你数学推导 / 手算式子,你算出来之后把公式套个板子,就得到结论——$OI$ 的大型数学题的代码都是板 ...
- 纯干货,Mysql innodb的ACID特性是怎么实现的?以及高并发情况下会出现的问题
首先说说什么是ACID: 它们分别是Atomicity(原子性),Consistency(一致性),Isolation(隔离性),Transaction(持久性) 原子性: 意为单个事务里的多个操作要 ...
- KVM 存储虚拟化
KVM 的存储虚拟化是通过存储池(Storage Pool)和卷(Volume)来管理的. Storage Pool 是宿主机上可以看到的一片存储空间,可以是多种类型,后面会详细讨论.Volume 是 ...
- rsync同步文件
rsync中的参数 -r 是递归 -l 是链接文件,意思是拷贝链接文件:-p 表示保持文件原有权限:-t 保持文件原有时间:-g 保持文件原有用户组:-o 保持文件原有属主:-D 相当于块设备文件: ...
- eslint 在webstorm配置
1.安装nodejs和eslint 2.在 webstorm 的 file - setting搜索eslint,配置eslint路径 3.在项目目录下新建.eslintrc文件 4.配置eslint ...