Ext2.0.2经典的一个JS组件(带EXT中文手册)
作者:姚海啸 来源:Yaohaixiao’s Blog 发布时间:2009-04-13 12:24:00
官方网站:http://www.extjs.com/
演示地址:http://www.yaohaixiao.com/effects/samples/ext2/docs/index.html
下载地址:http://www.yaohaixiao.com/effects/source/ext-2.0.2.rar (包含中文手册哦)
部分中文说明:
无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
我们将使用Ext,来完成一些JavaScript任务。
Zip文件包括三个文件:ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中(例如,Ext是在“C:\code\Ext\v1.0”中,那应该在”v1.0″里面新建目录“tutorial”。双击ExtStart.htm,接着你的浏览器打开启动页面,应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误,请按照页面上的指引操作。
在你常用的IDE中或文本编辑器中,打开ExtStart.js看看:
Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后,保证页面内的所有元素能被Script引用(reference)。你可删除alert()那行,加入一些实际用途的代码试试:
Ext.onReady(function() {
alert(”Congratulations! You have Ext configured correctly!”);
});
Element:Ext的核心
大多数的JavaScript操作都需要先获取页面上的某个元素(reference),好让你来做些实质性的事情。传统的JavaScript方法,是通过ID获取Dom节点的:
var myDiv = document.getElementById(’myDiv’);
这毫无问题,不过这样单单返回一个对象(DOM节点),用起来并不是太实用和方便。为了要用那节点干点事情,你还将要手工编写不少的代码;另外,对于不同类型浏览器之间的差异,要你处理起来可真头大了。
进入Ext.element 对象。元素(element)的的确确是Ext的心脏地带,–无论是访问元素(elements)还是完成一些其他动作,都要涉及它。Element的 API是整个Ext库的基础,如果你时间不多,只是想了解Ext中的一两个类的话,Element一定是首选!
由ID获取一个Ext Element如下(首页ExtStart.htm包含一个div,ID名字为“myDiv”,然后,在ExtStart.js中加入下列语句):
Ext.onReady(function() {var myDiv = Ext.get(’myDiv’);});
再回头看看Element对象,发现什么有趣的东东呢?
Element包含了常见的DOM方法和属性,提供一个快捷的、统一的、跨浏览器的接口(若使用Element.dom的话,就可以直接访问底层DOM的节点。);
Element.get()方法内置缓存处理(Cache),多次访问同一对象效率上有极大优势;
内置常用的DOM节点的动作,并且是跨浏览器的定位的位置、大小、动画、拖放等等(add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop)。
这意味着你可用少量的代码来做各种各样的事情,这里仅仅是一个简单的例子(完整的列表在ElementAPI中)。
继续在ExtStart.js中,在刚才我们获取好myDiv的位置中加入:
myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass(’red’); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明
猜你喜欢
- 背景介绍Pandas的DataFrame和Series在Matplotlib基础上封装了一个简易的绘图函数,使得数据处理过程中方便可视化查看
- var long2="1988-0w-07";alert(long2.substring(0,4)+"----
- 本文实例讲述了原生javascript运动函数的封装。分享给大家供大家参考,具体如下://封装匀速运动//参数:// 1、dom对象// 2
- SCRIPT 标记 用于包含JavaScript代码. 属性 LANGUAGE&nbs
- 前言:1、上几次讨论右键禁止等问题的时候,有网友问那里有键值表KeyCode,我今天写了一个javascript,以飨各位有需要者。2、适用
- 装饰器模式在以下场景中被广泛应用:动态地向对象添加职责或行为,而不需要更改对象的代码。例如,可以通过装饰器模式来实现日志记录、性能分析、缓存
- 前言在日常前端开发中, 经常会遇到频繁发起的重复请求, 会给服务器及网络造成不必要的压力, 可通过取消重复请求解决场景订单数据条件筛选查询表
- 使用ghost.py 通过搜搜 的微信搜索来爬取微信公共账号的信息# -*- coding: utf-8 -*-import sysrelo
- 1 The syntax of the SQL statement is verified.SQL的语法检查2 The data dicti
- 本文主要介绍了Python3中PyQt5简单实现文件打开及保存,分享给大家,具体如下:# -*- coding: utf-8 -*-# Fo
- 一、乱码的原因:1、 client客户端的编码不是utf82、server端的编码不是utf83、database数据库的编码不是utf84
- 前言我们见到几乎所有的 Web 网站或者手机 App 也好,它们的最终目的都是要留住用户,提升自己网站的用户注册量,所以说用户的概念也必须深
- 在前面的<如何使用PHP计算上一个月的今天>一文中, 我们提到strtotime函数在使用strtotime(”-1 month
- 题目:在提示符下使用open打开一个文件刚开始网上看了下打开的方式,结果一直实现不了,报错是没找到这个文件,而且和我输入的文件名不一样。错误
- 题目描述目录hw1下的图像是一些胶片的照片,请将其进行度量矫正。推荐流程:采用Canny算子,检测边缘点;采用Hough直线检测,根据边缘点
- 本文实例为大家分享了python实现简易聊天室的具体代码,供大家参考,具体内容如下群聊聊天室1.功能:类似qq群聊功能1.有人进入聊天室需要
- 今天在写一个linux下自动备份指定目录下的所有目录的脚本时,遇到了一个问题,由于我是需要备份目录,所以,需要判断扫描的文件是否为目录,当我
- 对于使用虚拟主机的站长朋友,我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- 下表列出了所有Python语言支持的赋值运算符。假设变量a持有10和变量b持有20,则: 例如:试试下面的例子就明白了所有在Pyt
- 一、利用webbrowser.open()打开一个网站:>>> import webbrowser >>>