不怎么敢用“学习笔记”,这种字眼的,害怕自己写得不好,被骂。不过,这次也就认真写次学习笔记吧,Share是一种和平主义的精神,呵呵。
Ext,在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行开发,并不再依赖于YUI,在使用Ext的过程当中,你可以使用Ext-base, Prototype+script.aculo.us,jQuey和YUI四种中的一种,我因为比较习惯使用prototype,所以会选择Prototype+script.aculo.us的组合。jQuery也是一个写得很优美的框架,没有用过,以后抽空看看代码,应该获益匪浅。
从Ext的站点上下载最新版本的文件,解压什么的我就不说,我想说一下这个文档的结构:
├─adapter 存放所有adapter的文件夹
├─build 经过压缩(build)过的文件
├─docs 文档
├─examples DEMO
├─package 按包分类的文件
├─resources 资源文件,包括CSS和一些图片
└─source 源代码
使用过程当中,除非你特别介意JS文件的加载是否影响速度,大可只引入ext-all.js和ext-all.css两个文件,Ext在包管理方面,我觉得应该向Dojo学习下。
JS和CSS引入的顺序:
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" /> 必须引入
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" /> 可选,用来控制主题,并且有其他两个可选值,xtheme-gray.css、xtheme-vista.css。
引入JS:按照底层依赖的不同:
Ext Stand-alone:
ext-base.js
ext-all.js (or your choice of files)
Yahoo! UI (.12+):
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)
jQuery (1.1+):
jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)
Prototype (1.5+) / Scriptaculous (1.7+):
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)
把相应的文件引入到HTML的head里后,你就可以写你自己的第一Ext的Demo了。
<script type="text/javascript">
function InitDialog() {
var dialog = new Ext.BasicDialog("hello-dlg", {
id: "hello-dialog",
title: "Hello",
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
Ext.ComponentMgr.register(dialog);
}
function OnButtonClick() {
var dialog = Ext.getCmp("hello-dialog");
dialog.show();
}
Ext.onReady(InitDialog);
</script>
<button onClick="OnButtonClick();">Show</button>
这里有四处要注意一下:
id: "hello-dialog", Compoent的ID,有了这个ID才能用ComponentMgr.register来在全局进行注册
Ext.ComponentMgr.register(dialog); 注册组件
var dialog = Ext.getCmp("hello-dialog"); 根据ID来得到组件
Ext.onReady(InitDialog); Ext.onRead是注册一个在整个页面的DOM构建完成会被执行的函数
呵呵,第一个例子就出来了,试试看吧~
分享到:
相关推荐
ext学习笔记代码 ext学习笔记代码 ext学习笔记代码
在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...
里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....
EXT,全称EXT JS,是一种基于JavaScript的前端框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括表格、...EXT学习笔记无疑是一个很好的辅助工具,它可以帮助学习者系统地掌握EXT框架,提升开发效率。
在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...
EXT学习笔记,是本人在一个月的学习期间整理的
而Ext Js是一个JavaScript库,提供了丰富的用户界面组件,用于构建现代Web应用。 GWT-Ext是这两者的结合,它继承了GWT的Java编程模型和Ext Js的精美UI组件。这使得开发者可以利用Java的强大和类型安全,同时享受Ext...
NULL 博文链接:https://lionelxx777.iteye.com/blog/359860