ext 介绍
来源:互联网 发布:海岛奇兵妹妹升级数据 编辑:程序博客网 时间:2024/06/05 22:42
EXT 介绍
无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
下载Ext如果你未曾下载过,那应从这里下载最新版本的Ext http://extjs.com/downloads 。
针对你的下载需求,有几个不同的弹性选项。通常地,最稳定的版本,是较多人的选择。下载解包后,那个example文件夹便是一个探索Ext的好地方!
开始! Download Example File- IntroToExt.zip
我们将使用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); // 使元素半透明 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。详情请看http://wddaffwdd.zhan.cn.yahoo.com/2124530/1.html
- ext 介绍
- Ext.data.Store介绍
- Ext.Ajax简单介绍
- ext.get 方法介绍。
- ext direct spring 介绍
- Ext.XTemplate 介绍
- ext 基本函数介绍
- Ext的相关介绍
- Introduction to Ext (EXT 介绍入门)
- Tutorial:Introduction to Ext (EXT 介绍入门)
- Ext JS5 API 目录介绍&Ext类
- Ext Ext.Decode = Ext.util.JSON.Decode 方法介绍
- ext 2.0 的函数介绍
- ext.Element类的介绍
- ext panel 的主要功能介绍
- EXT表格组件GRIDPANEL介绍
- 【翻译】Ext JS 4.2介绍
- Ext2.0教程一:Ext介绍以及 ext页面布局
- python新手入门教程
- Skip List(跳跃表)原理详解与实现
- 数据占据内存大小
- Linux Socket编程(不限Linux)
- 如何隐藏SWT控件
- ext 介绍
- 在vmware 中 centos 6 网卡不固定,导致IP变动
- (1)The Android Application Framework Overview
- HDU1412
- android下检查网络不通的后续合理人性化操作(常用)
- Sybase日期函数的应用,例如计算一个月的第一天等等
- 毕业后就是程序员——我的阿里、金山、中华、腾讯、360、网易面试总结(三)
- 【日常小记】linux中强大且常用命令:find、grep
- Autodesk ADN Developer Day (Devdays)12月份在中国