1. 创建程序

1.1 创建目录建议

根据官方建议，创建一个ExtJS应用程序的目录推荐如下：

- appname
| - app
| - namespace
| - Class1.js
| - Class2.js
| - ...
| - extjs
| - resources
| - css
| - images
| - ...
| - app.js
| - index.html

appname目录：应用程序的根目录。

app目录：业务代码。

extjs目录：存放ExtJS各JS文件。

resources目录：资源目录；包含CSS和图片。

app.js文件：应用程序的逻辑js文件。

index.html文件：应用程序的入口点。

可以看出，整个目录只有一个html文件，其他的业务都是通过Js文件创建。

ExtJS非常适合SAP(单页面应用)的程序，除了入口的index.html，其他业务都可通过js文件来进行开发和管理。

1.2 实际目录

可根据需要：

1) 导入ext-4.2.1-gpl.zip里的ext-all.js到项目的 extjs4.2 目录里。

2) 导入ext-4.2.1-gpl.zip中的Resources到项目的 Resources 目录里。

1.3 index.html

index.html文件代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ExtJS4.2</title>
<meta charset="utf-8" />
<link href="Resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="ExtJS4.2/ext-all.js"></script>
<script src="app.js"></script>
<script>
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: '100%',       
title:'Test',
renderTo: Ext.getBody(),
items: [
Ext.create('Ext.form.Display', {
width: '100%',
value: '第一个ExtJS程序'
})
]
});
});
</script>
</head>
<body>
</body>
</html>

1.4 运行图

2. 代码分析

2.1 Ext.onReady()方法

Ext.onReady( fn, [scope], [options]) ：传入一个函数，当DOM和所需要的类都加载完毕后执行此函数。

参数：

①fn {function} ：加载完毕要执行的函数。

②scope {object} 可选：回调函数的作用域。

③options {object} 可选：在创建事件时，设定创建的机制。此函数最终调用 Ext.util.Event.addListener() 方法；可在里面找到相关的设置。例如 priority 字段表示事件创建是否优先；如第二个顺序加载的Ext.onReady()中options设置为 {priority:true}，那么此Ext.onReady()会在第一个加载的Ext.onReady()之前执行(前提是第一个Ext.onReady()没有设置{priority:true})。