入门介绍
Ext是一个javascript库，它包含有javascript文件以及CSS文件和一些图片资源文件。所以要引用它，相当简单。把它解压之后，即可引用，比如：
|
<link rel="stylesheet" type="text/css" href="../script/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext/ext-all.js"></script>
|
具体的路径，大家根据自己机器上的路径来定。
让我们来开始第一个程序：
1、 首先编写一个JSP文件：
|
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../script/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../script/ext/ext-all.js"></script>
<script type="text/javascript" src="index01.js"></script>
</head>
<body>
</body>
</html>
|
可以看到，在这个JSP文件中，引入了index01.js文件，下面我们来编写这个index01.js文件：
2、编写index01.js文件
|
Ext.onReady(
function(){
//获得document.body这个DOM元素，并更新它的内容
Ext.get(document.body).update("<div id='test'></div>");
//创建一个Panel的UI对象
new Ext.Panel({
renderTo:"test", //并将这个Panel的UI对象展现到test元素中
title:"测试标题", //这个是Panel对象的标题
html:"<font color='red'>这里是内容</font>", //Panel对象的内容
width:"200px" //Panel对象的高度
});
}
);
|
3、运行index01.jsp，即可以得到如下效果
4、我们可以改变一下index01.js中的内容，比如增加一个属性：
|
Ext.onReady(
function(){
//获得document.body这个DOM元素，并更新它的内容
Ext.get(document.body).update("<div id='test'></div>");
//创建一个Panel的UI对象
new Ext.Panel({
renderTo:"test", //并将这个Panel的UI对象展现到test元素中
title:"测试标题", //这个是Panel对象的标题
html:"<font color='red'>这里是内容</font>", //Panel对象的内容
width:"200px", //Panel对象的高度
collapsible: true //增加这个属性，表示内容部分可以折起来
});
}
);
|
注意最后一个属性：collapsible:true！
运行之后，效果如下:
右上角出现了一个三角框，点击它，即可以收起下面的内容！
这些，就是Ext给我们带来的初步印象。
要想能够灵活应用Ext，我们必须有步骤的去学习关于Ext中各种内容，深入了解Ext的设计原理，然后才能得心应手、随心所欲的去运用、扩展、封装Ext，真正精通javascript这门UI语言。
- 大小: 1.5 KB
- 大小: 1.6 KB
- 大小: 26.1 KB
分享到：
相关推荐
虽然通常情况下，开发者将其视为一种基于函数的语言，仅用来处理一些简单的前端数据验证或实现基本的页面动态效果，但事实上，JavaScript 具有强大的面向对象编程能力。这主要体现在它支持面向对象编程的基本特征：...
JavaScript是一种解释型、跨平台的编程语言，主要应用于Web浏览器，用于增加网页的动态功能，如响应用户交互、操作DOM（文档对象模型）、执行异步通信（Ajax）等。JavaScript是Web开发中的基石，而ExtJS则是在这个...
在JavaScript的世界里，面向对象（Object-Oriented Programming, OOP）是一种常用的设计模式，它允许我们通过类和对象来组织代码，实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制，特别是继承的...
了解并掌握这些Ext的面向对象特性，有助于编写更高效、结构化的JavaScript代码，特别是在构建复杂的Web应用程序时。在实际的`ExtTest`项目中，这些概念会被广泛运用，以创建可复用、可维护的组件和模块。
EXTJS 是一个基于 JavaScript 的富客户端框架，它提供了强大的组件模型和面向对象的编程方式，使得开发者能够构建复杂的 Web 应用程序。面向对象编程（Object-Oriented Programming, OOP）是EXTJS的核心特性之一，...
Ext JS是一个流行的JavaScript库，用于构建桌面和移动应用程序的用户界面。它提供了一种面向对象的编程模型，使得开发者可以方便地管理和操作组件、数据存储以及事件处理。 在Ext JS中，对象通常指的是各种UI组件...
EXT2.0、EXT4.0 和 JS 是计算机科学领域中的三个重要概念，它们分别代表了Linux文件系统、JavaScript编程语言以及JavaScript库EXT JS的相关版本。 EXT2.0是Linux操作系统下的一种文件系统，它是EXT（第二扩展文件...
对于已经具备面向对象编程基础的开发者来说，学习Ext可以帮助他们快速创建功能强大且具有吸引力的Web应用。 首先，理解Ext的核心概念至关重要。Ext是一个Ajax框架，其主要目标是提升Web应用的交互性和用户体验。它...
1. **EXT类体系**：EXT基于面向对象的编程理念，采用类继承的方式来组织代码。所有EXT组件都继承自一个基础类，如Ext.Component，通过扩展和组合这些基类来创建特定的UI元素。 2. **静态方法的概念**：静态方法是不...
Ext框架是基于JavaScript的UI库，它为Web应用程序提供了丰富的组件和交互效果。在深入探讨Ext框架结构之前，我们先来理解一下JavaScript框架的基本概念。一个JavaScript框架是用于简化JavaScript开发的一系列预定义...
JavaScript是EXT JS的基石，因此掌握JavaScript的基本语法和面向对象编程是使用EXT的前提。EXT JS 1.1虽然较为古老，但仍然包含了许多现代前端开发的理念，如MVC（Model-View-Controller）架构，这种架构模式有助于...
综上所述，文章深入探讨了基于Ext的单页系统设计方法，强调了面向对象编程思想在客户端JavaScript中的应用，以及如何利用Ext的组件化和动态数据加载特性优化用户体验。通过这种方式，开发者能够构建出高效、易于维护...
JavaScript是一种基于对象的编程语言，但并非严格意义上的面向对象语言，因为它仅实现了封装，缺乏继承和多态。JavaScript中的对象是关键元素，几乎无处不在，甚至函数本身也被视为对象。对象可以理解为可变的键控...
EXT基于JavaScript，所以理解JavaScript语法和面向对象编程概念是非常必要的。开发者可能会学到如何创建EXT组件、布局管理、事件处理等。 总的来说，这个“ext/ajax开发资料”应包含EXT库的Ajax使用方法，以及可能...
面向对象编程** JavaScript支持类（ES6引入）和原型链实现面向对象特性。可以创建对象、定义构造函数、使用原型属性和方法。 **13. JavaScript Date对象** Date对象用于处理日期和时间，可以创建、比较和操作日期...
总结来说，本压缩包提供的资料专注于Ext类的构造方法，这涉及到Ext JS的核心编程概念，包括类的继承、构造函数的使用、配置对象、组件生命周期以及代码重用策略。掌握这些知识将有助于开发者更深入地理解和使用Ext ...
通过对这些PPT的学习，你将掌握EXT的基本用法，包括DOM操作、事件处理、组件系统和面向对象编程。EXT结合Ajax和Java，可以构建出高性能、用户友好的Web应用，适用于各种业务场景。深入理解并熟练运用EXT，能提升你的...
总结来说，"Ext继承和扩展写的例子"这个主题，涉及到的核心知识点包括JavaScript的面向对象编程，Ext JS库的使用，特别是其组件模型和继承机制。通过学习这个例子，开发者可以深入理解如何利用这些特性创建可复用、...
- **面向对象编程**：使用类和对象的概念来组织代码。 - **继承机制**：通过继承现有类来扩展功能。 #### 13. 表单组件入门 - **表单体**：定义表单的整体结构。 - **表单字段**：添加输入框、下拉列表等控件。 ...