`
bbiao
  • 浏览: 72147 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Ext学习笔记(一)

阅读更多
不怎么敢用“学习笔记”,这种字眼的,害怕自己写得不好,被骂。不过,这次也就认真写次学习笔记吧,Share是一种和平主义的精神,呵呵。
 
Ext,在最开始的时候,是作为YUI的一个扩展存在的,所以那个时候它的名称是YUI.Ext,后来,Ext作为一个独立的项目进行开发,并不再依赖于YUI,在使用Ext的过程当中,你可以使用Ext-base, Prototype+script.aculo.us,jQuey和YUI四种中的一种,我因为比较习惯使用prototype,所以会选择Prototype+script.aculo.us的组合。jQuery也是一个写得很优美的框架,没有用过,以后抽空看看代码,应该获益匪浅。
 
Ext官方网站:http://www.extjs.com
 
从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学习笔记代码 ext学习笔记代码

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    Ext学习笔记

    Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    Ext学习和学习笔记

    里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    十分有用有帮助的EXT学习笔记

    EXT,全称EXT JS,是一种基于JavaScript的前端框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括表格、...EXT学习笔记无疑是一个很好的辅助工具,它可以帮助学习者系统地掌握EXT框架,提升开发效率。

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...

    EXT学习笔记

    EXT学习笔记,是本人在一个月的学习期间整理的

    Gwt-Ext学习笔记之进级篇

    而Ext Js是一个JavaScript库,提供了丰富的用户界面组件,用于构建现代Web应用。 GWT-Ext是这两者的结合,它继承了GWT的Java编程模型和Ext Js的精美UI组件。这使得开发者可以利用Java的强大和类型安全,同时享受Ext...

    EXT学习笔记1 EXT项目创建

    NULL 博文链接:https://lionelxx777.iteye.com/blog/359860

Global site tag (gtag.js) - Google Analytics