ExtJS学习之基础入门篇

最新推荐文章于 2025-09-10 14:53:18 发布

转载最新推荐文章于 2025-09-10 14:53:18 发布 · 91 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kobicc/archive/2011/01/18/1937878.html

文章标签：

#javascript #ui #java #ViewUI

本文介绍了ExtJS框架的基本概念、文件结构及使用方法。涵盖了解压文件的内容介绍、如何在页面中引入样式及库文件，并提供了简单的编码示例。

概念

　　1、 ExtJS是一个用JavaScript写的，主要用于创建前端用户界面，是一个与后台无关的前端Ajax框架。因此可以把ExtJS用在java开发语言的应用中。

　　2、 ExtJS通过参考java Swing等机制来组织可视化组件。无论从UI界面上的CSS样式，还是到数据解析上的异常处理；都可以说是JavaScript客户端技术的精品。

框架介绍

　　1 解压后文件文件内容介绍：

adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
resources：Ext UI资源文件目录，如CSS、image文件都存放在这里。
Ext-all.js：压缩后的Ext全部源码。

　　2 应用extjs：

应用extjs需要在页面中引入extjs样式及extjs库文件。

　　　　1） extjs样式文件路径为：resources/css/ext-all.css

　　　　2） extjs的js库文件主要包含两个：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示框架基础库；ext-all.js是extjs的核心库。

　　3 开始编码：

　 1）引入extjs样式文件和库文件后，ExtJS会执行Ext.onReady(fn)中指定的fn函数。

　 2）大致的代码如下：

function fn() {

alert("ExtJS库已加载！！！");

}

Ext.onReady(fn);

</script>

extjs组件继承结构图

　　1 ExtJS对框架进行了非常大的重构，形成了一个结构及层次分明的组件体系。这些组件形成了ExtJS的控件。

　　2 ExtJS组件是由Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到组件的类型或者定义一个指定类型的组件。

组件的使用

　　1 组件可以通过new关键字来创建，比如一个窗口，使用new Ext.Window()；创建一个表格则使用new Ext.GridPanel()。

　　2 一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含了创建组件所需要的配置属性及值。组件根据构造函数中的参数属性值来初始化组件。例子：创建一个窗口：

var win = new Ext.Window( {

title: "newWindow",

width: 300,

height: 200,

html: "这里通过{}这个对象的属性值构造这个窗口"

});

</script>

理解：

1 在编写页面代码时，要注意代码是顺序执行的，如果js要用到html中的dom对象，一定要放到当html载入了以后。否则会抛出dom为null异常。

　　在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造函数使用一个对象，对象包括属性名称和属性值；该对象中的信息也就是指组件的配置属性。

　　每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类中的一些配置属性的含义及用途进行重新定义。

　　学习和使用ExtJS，最关键的是掌握ExtJS中各个组件的配置属性及具体的含义。这些在docs文档中都有详细介绍。

例子：

1 载入样式和库文件顺序

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/css-all.css"/>


<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>

2 基本例子

1）

<script type="text/javascript">
<!--
  function fn() {
   alert("这是为什么呢？？");
  }
  Ext.onReady(fn);

  //匿名函数
  Ext.onReady(function() {
   alert("这个真的是匿名函数");
  });
//-->
</script>

2）

<script type="text/javascript">

</script>

3）// 学习和使用ExtJS，最关键的是掌握ExtJS中各个组件的配置属性及具体的含义。

<script type="text/javascript">

</script>

4）

5）// 容器中的子元素