ExtJS 4.0.7 学习教程：从入门到实践

5星 · 超过95%的资源需积分: 9 155 浏览量更新于2024-07-27 收藏 4.18MB PDF 举报

"这篇文档是关于Extjs 4.0.7的学习指南，主要面向中文读者，旨在帮助初学者入门并提供学习资源。文档内容包括如何下载Extjs、搭建学习环境，以及通过编写简单的示例来测试环境是否配置正确。" 在深入探讨Extjs 4.0.7之前，首先需要了解什么是Extjs。Extjs是一个JavaScript框架，用于构建富客户端Web应用程序，它提供了丰富的组件库和强大的数据管理功能。通过使用Extjs，开发者能够创建具有复杂用户界面和交互的网页应用。 1. 获取Extjs 要开始学习Extjs，首先需要访问http://extjs.org.cn/ 下载所需的Extjs发布包。这个网站不仅提供下载，还可能包含其他有用的资源和支持。 2. 搭建学习环境建议在已安装了myeclipse（一个集成开发环境）和tomcat（一个流行的Java Servlet容器）的环境中进行学习。如果没有，你需要按照相关教程安装这些工具。在myeclipse中创建一个新的Web项目，命名为"Extjs4"，然后将解压后的Extjs 4.0.7文件复制到Web项目的Webroot目录下。同时，Examples目录包含了Ext官方提供的示例程序，其中可能包含PHP代码，但在这个学习阶段，我们暂时可以忽略与PHP相关的信息。 3. 测试环境启动tomcat服务器，通过浏览器访问http://localhost:8080/Ext4/index.html（假设tomcat的默认端口是8080），如果看到预期的界面，就表明环境已成功搭建。同时，你可以通过http://localhost:8080/Ext4/docs/index.html 查看API文档，以及http://localhost:8080/Ext4/examples/index.html 浏览示例页面，以便进一步学习。 4. 编写第一个例子为了验证环境配置，你可以创建一个简单的“Hello World”程序。在Webroot目录下创建一个名为'helloworld.js'的文件，编写如下JavaScript代码： ```javascript Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'HelloExt', html: 'Hello! Welcome to ExtJS.' }] }); } }); ``` 同时，创建一个'helloworld.html'文件，引入必要的CSS和JavaScript资源： ```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="helloworld.js"></script> </head> </html> ``` 访问这个HTML文件，你将看到一个简单的窗口显示“Hello! Welcome to ExtJS.”，证明你的环境已经成功配置。在接下来的学习过程中，你将逐步掌握Extjs的组件模型、布局管理、数据绑定、事件处理等核心概念，通过实践不断深化理解。此外，利用提供的API文档和示例，可以帮助解决遇到的问题，加速学习进程。记住，持续实践和查阅相关资料是掌握任何技术的关键。

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 文好的，建您是英文原文议还阅读接地址是链：。

剩余140页未读，继续阅读

oWuLiWu1

粉丝: 0
资源: 6

ExtJS 4.0.7 学习教程：从入门到实践

Extjs4.0.7学习指南

Extjs4.0学习指南(中文)

Extjs4.0.7入门与环境搭建教程

ExtJs4.0学习指南（中文）

Extjs4.0学习指南（中文版）

Extjs4.0学习指南(中文).docx

Extjs4 Extjs4学习指南

extjs4 学习指南 学习手册

Extjs4.0学习指南

Extjs4学习指南

最新资源

extjs4 学习指南学习手册