开始Ext（一）

最新推荐文章于 2025-10-02 09:12:18 发布
原创 最新推荐文章于 2025-10-02 09:12:18 发布 · 2.4k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#ext #stylesheet #function #extjs #html
#javascript

作者：齐好宗

Ext是什么？

准确的说,Ext是一个基于javascript的GUI库，他能够极大的方便你开发基于web2.0的应用。你可以点击这里了解详细信息。

Ext能做什么？

Ext关注点在于前台UI的展现上，请参考以下界面来决定你是否要使用他

 

登陆窗口

布局示例

 

开始Ext之旅
下载ext

Ext目前最新的版本是2.0RC1,我推荐你使用这个版本，因为2.0和目前stable release 的1.1.1版本相比，有以下主要变更：
§        组件模型
§        容器模型
§        布局
§        Grid
§        XTemplate
§        DataView

请点击这里下载Ext 2.0 RC1.下载完毕以后请将ext-2.0-rc1.zip解压到C盘根目录下，目录结构如下图所示：

 目录结构

第一个程序HelloWorld


首先在ext-2.0-rc1下建立一下day1的文件夹，然后在day1下建立HelloWorld.html和HelloWorld.js两个文件，如下图所示：

 示例目录结构

请打开HelloWorld.html,加入以下代码：

 

< html >
< head >
     < title > Hello World </ title >
    
     <!-- 包含Ext js  -->
     < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
< script  type ="text/javascript"  src ="../ext-all-debug.js" ></ script >
<!-- 包含HelloWorld的js  -->
     < script  type ="text/javascript"  src ="HelloWorld.js" ></ script >
     <!-- 包含Ext css  -->
     < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css" >
</ head >
< body >
</ body >
</ html >

 

打开HelloWorld.js加入以下代码：

 

Ext.onReady( function () {
    var helloWindow = new Ext.Window({
        title : 'Hello World',
        width : 200,
        height : 150,
        layout : 'fit',
        collapsible : true,
        closable : true,
        maximizable : true,
        items : [{
            html : '<p> Hello World. </p>'
        }],
        buttons : [{
            text : 'close',
            handler : function(){
                helloWindow.hide();
            }
        }]
    });
    helloWindow.show();
} );


 
使用浏览器打开HelloWorld.html,运行效果如下：

HelloWorld示例

Ext.js教程完整版
06-29
在这章里，我们将介绍 ExtJS 的基本功能。如果你对 web 开发熟悉的话，您会 惊诧于 ExtJS 框架的优雅！不同其他的 JavaScript 库， ExtJS 为您的开发夯实了基础，只 需几行代码，你就可以制作出丰富的用户界面。 本章包括： 1. ExtJS 的功能和您将会喜爱上它的原因； 2. 如何获得 Ext 并在 web 应用中采用它； 3. 采用”适配器(adapters)“使得 Ext 和其他的 JavaScript 库共存； 4. 充分利用 AJAX 技术； 5. 在您的语言中展示 ExtJS 对象； 关于 Ext： 我们采用最新的的 Ext 2.x 版本， 1.x 版本到 2.x 版本的是一个重组的过程，包括 添加新的组件、重命名组件用来重新组织结构等等。这使得 1.x 和 2.x 兼容性很低。 3.x 版 本则不然，他对 2.x 有很强的兼容性，可以很好的联合本书中所设计的内容。 Ext 的 开发组决定在日后的版本发布中都做到向前兼容。 Ext 库是对雅虎 YUI 的一个拓展，提供了它所不支持的特性：良好的 API，真实 的控件。虽然 YUI 致力于用户界面，但是它却没有提供许多有用的功能。
ext js 页面自动刷新教程集合
07-13
ext js 页面自动刷新教程集合 ext js 页面自动刷新教程集合
Ext Js详解指南
weixin_30685047的博客
02-17 2781
什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript、HTML和CSS开发而成，无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。 个人总结Ext JS的方法 从Extjs的视图学起 例如：窗体、表单、数等等。并且可以掌握调试工具和技巧 学习使用API 学会怎么查询以及使用大牛提供的接口解决常见的问题（一般我们用到的效果，大牛们在做...
ExtJs 入门教程
weixin_30292843的博客
12-31 710
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体：Window组件] ExtJs 入门教程四[表单：FormPanel] ExtJs 入门教程五[文本框：TextField] ExtJs 入门教程六[按钮：Button] ExtJs 入门教程七[登陆窗体Demo：Login] ExtJs 入门教程八[脚本调试Fir...
Ext.js—常用函数方法
weixin_54039032的博客
07-15 2219
Ext.js
Ext.js 即时入门（一）
最新发布
龙哥盟
10-02 1822
Ext JS是一个 JavaScript 库，它使得在 Web 应用程序中创建跨平台的浏览器和桌面风格的用户界面变得（相对）容易。它支持以下功能：组件模型布局无插件图表绘图CSS 主题JavaScript 是一种无类的、面向原型的语言，但 Ext JS 遵循基于类的方法，使代码随着时间的推移具有可扩展性和可伸缩性。类名可以使用对象属性点符号（）分组到具有命名空间的包中。命名空间允许开发者编写结构化和可维护的代码，使用库而无需担心覆盖函数，避免污染全局命名空间，并提供封装代码的能力。
Ext使用总结（一）
wxg6203的专栏
06-09 1267
  一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注：享元模式（Flyweight De...
从 0 开始入门 Chrome Ext 安全（一） -- 了解一个 Chrome Ext
晓得哥的博客
11-26 1147
作者：LoRexxar’@知道创宇404实验室 时间：2019年11月21日 原文：https://paper.seebug.org/1082/ 在2019年初，微软正式选择了Chromium作为默认浏览器，并放弃edge的发展。并在19年4月8日，Edge正式放出了基于Chromium开发的Edge Dev浏览器，并提供了兼容Chrome Ext的配套插件管理。再加上国内的大小国产浏览器大多都是...
Extjs4循序渐进(一)——开始Ext
一亩三分地
05-29 1377
Extjs4循序渐进(一)——开始Ext   前言 　　做前端开发也很长时间了，从写基本的JS到JQ，从easyui、jq-ui等简单的UI插件到自己写插件也经历过不少。目前因项目需要，要用到Extjs做前端，于是用了最新的4.0.7版本。虽然以前也接触过Extjs，但在一段时间的开发过程中依旧感觉到各种无力,特别是在Extjs4.X版本改动较大的情况下，很多东西已经不能只靠百
EXT 中文手册
手掌日月摘星辰
05-28 1万+
个人github：https://github.com/qiilee  欢迎follow EXT 中文手册 前  言 本手册所有内容均粘贴自互联网，如有错误，请多见谅。 目    录     EXT中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始！ 4 Element：Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使...
ExtJS入门教程(超级详细)
03-13
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ………………………… 6 7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、Ext.CompositeElementLite类 ……… 16 15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20、Ext.util.DelayedTask类 ……………… 20 21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext.menu.TextItem类 …………… 52 63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
Ext.js 4 部分基础内容学习记录
积累、分享。聚沙成塔
07-29 1776
ext.js 4
开始Ext（二）
齐好宗(cycloneQI)的专栏
12-02 2063
作者：齐好宗HelloWorld里做了什么？ 我们来看一下增加了注释的HelloWorld.js //文档准备好时触发onReady事件，该事件发生在onload和图像装载好之前Ext.onReady(function()...{    //声明一个Window对象    var helloWindow = new Ext.Window(...{        title : 
Ext.js 3.0开发教程及API参考
weixin_32747681的博客
08-12 573
Ext.js 3.0 是一款广泛使用的JavaScript框架，专为开发富互联网应用（RIA）而设计，提供了丰富的用户界面组件和数据管理机制。在本文的教程中，我们将重点关注其关键特性，包括如何搭建开发环境、基础组件的使用以及数据绑定的核心概念。掌握这些知识对于任何希望利用Ext.js 3.0进行高效开发的开发者来说，都是必不可少的。我们将首先介绍Ext.js的基本架构和组件模型，确保读者能够理解Ext.js如何组织代码和管理项目依赖。接着，我们会深入探讨Ext的核心组件以及数据绑定的基础和高级技术。
Ext JS教程
qq_35711122的博客
07-03 723
Extjs表格控件功能丰富、界面美观、轻量级的实现，都是人们对其趋之若鹜的理由，究竟Extjs能实现多少不可思议的功能，就让我们一起来学习一下教程里面的内容。ExtJS代表扩展JavaScript，是基于YUI（Yahoo用户界面）的sencha的JavaScript框架和产品。它基本上是一个具有现代UI的桌面应用程序开发平台。本教程完全理解Ext JS。这个参考将带你通过简单和实用的方法，同时学习Ext JS。
extjs初学者教程
热门推荐
09-05 1万+
layout 1.面板     (1)类结构         Ext.Base         Ext.AbstractComponent             Ext.Component                 Ext.container.AbstractContainer                     Ext.container.Container   
ext.js学习
TivonaLH的博客
10-08 732
1.ext.js教程：https://www.w3cschool.cn/extjs/extjs_overview.html 2.Ext.grid.GridPanel属性及方法：https://www.cnblogs.com/hqyj/p/7818209.html 3.ext.js中的数据表格中的 renderer:function（value， cellmeta， record， row...
二、第一个ExtJS程序:helloExtJS
生命在于折腾
06-08 1392
开发前的准备 下载并解压ExtJS包后，可以得到下图的文件目录结构：     在实际开发过程中并不需要所有的文件和目录，所需的包含如下目录即可：   若使用eclipse进行开发，只需将上述文件复制到WebRoot目录或其子目录。   开始 新建firstextjs.html 在使用ExtJS之前，需要在页面引入相应的样式和js文件，一般包括的最小集合
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值