ExtJS4学习指南：从入门到实践

4星 · 超过85%的资源需积分: 9 201 浏览量更新于2024-07-27 收藏 4.46MB PDF 举报

"EXT4.0学习资料" EXTJS是一个基于JavaScript的富客户端框架，用于构建桌面级的Web应用程序。EXTJS 4.0是该框架的一个重要版本，提供了许多改进和新特性，使得开发复杂的用户界面变得更加容易。这篇学习指南针对想要了解EXTJS 4.0的初学者，提供了从基础到高级的全面指导。 1. 获取EXTJS 要开始EXTJS 4.0的学习，首先需要下载EXTJS的发布包。可以从EXTJS的官方网站http://extjs.org.cn/获取所需的软件包，这里包含了EXTJS的核心库和相关支持文件。 2. 搭建学习环境在开始编程之前，确保你的开发环境中已经安装了必要的工具，例如MyEclipse和Tomcat。在MyEclipse中创建一个新的Web项目，并将EXTJS 4.0.7压缩包解压后的所有文件复制到项目的Webroot目录下。EXTJS官方提供的Examples目录包含了一些示例程序，这些程序可能包含PHP代码，如果遇到错误，可以暂时忽略。部署并启动Tomcat服务器，然后在浏览器中输入http://localhost:8080/Ext4/index.html来测试环境是否正常。如果能看到EXTJS的欢迎界面，说明环境已经搭建成功。此外，可以通过http://localhost:8080/Ext4/docs/index.html访问API文档，以及通过http://localhost:8080/Ext4/examples/index.html查看示例页面。 3. 编写第一个EXTJS程序 EXTJS的编程通常从创建一个应用开始。在Webroot目录下创建`helloworld.js`文件，写入一个简单的EXTJS应用。这个应用创建了一个全屏容器，并在其中添加了一个带有标题和HTML内容的面板。 ```javascript Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'HelloExt', html: 'Hello! Welcome to ExtJS.' }] }); } }); ``` 同时，创建一个`helloworld.html`文件，引入EXTJS的CSS样式表和JavaScript库，以及你刚刚创建的`helloworld.js`脚本。 ```html <html> <head> <title>HelloExt</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="HelloExt.js"></script> </head> <body></body> </html> ``` 4. 进阶学习 EXTJS 4.0引入了许多新功能，如MVC架构、数据绑定、可配置布局、组件化设计等。学习EXTJS不仅仅是编写JavaScript代码，还需要理解如何组织应用结构、如何与服务器进行数据交互、如何创建和配置各种组件，以及如何利用其强大的布局系统。 5. 学习资源 EXTJS的官方API文档是学习的重要参考，它详细介绍了每个类、方法和属性。同时，EXTJS社区也提供了大量的教程、示例和论坛讨论，可以帮助你解决在学习过程中遇到的问题。通过以上步骤，你可以开始EXTJS 4.0的探索之旅。随着对EXTJS的理解加深，可以尝试构建更复杂的应用，掌握更多高级特性，如拖放操作、图表、表格和数据网格等。EXTJS 4.0不仅适合新手入门，也为有经验的开发者提供了丰富的工具和功能，以实现高效、高性能的Web应用。

Column 布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中

每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

Column 布局没有直接的配置选项（继承的除外），但 Column 布局支持一个

columnWidth 属性，在布局过程中，使用 columnWidth 指定每个面板的宽度。

注意：使用 Column 布局布局时，其子面板的所有 columnWidth 值加起来必须介于

0~1 之间或者是所占百分比。他们的总和应该是 1。

另外，如果任何子面板没有指定 columnWidth 值，那么它将占满剩余的空间。

示例代码：

Ext.application({

name:"HelloExt",

launch:function () {

Ext.create('Ext.panel.Panel', {

title: 'Column Layout - 按比例',

width: 350,

height: 250,

x:20,

y:100,

layout:'column',

items: [{

title: 'Column 1',

columnWidth: .25

},{

title: 'Column 2',

columnWidth: .55

},{

title: 'Column 3',

columnWidth: .20

}],

renderTo: Ext.getBody()

});

}

});

3 Extjs4 文档阅读

ExtJS4 使用新的类机刢迚行了大量的重构。为了支撑新的架构,ext4 几乎重写了每一个

类,因此最好先好好的理觋一下新的架构,再开始编码。

本文适合惱在 extjs4 中扩展现有类戒者创建新类的开发者。其实，丌管是惱扩展还是

使用，都建议您仔细阅读一下（如果 E 文好的，建议您还是阅读英文原文。链接地址是：

剩余139页未读，继续阅读

vivion_ren

粉丝: 3
资源: 8

ExtJS4学习指南：从入门到实践

Ext4.0学习总结及功能详解

Ext4.0学习总结及功能详解(特别详细)

ext4.0中文文档

EXT4.0 学习的好帮手

ext 4.0 学习笔记.doc

ext4.0学习总结及使用说明

ext 4.0 api

Ext4.0源文件

Ext4.0下载

Ext4.0教程

最新资源