本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。

目录

1. 创建程序

　　1.1 创建目录建议

　　1.2 实际目录

　　1.3 index.html

　　1.4 运行图

2. 代码分析

　　2.1 Ext.onReady()

　　2.2 Ext.create()

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})。

2.2 Ext.create()方法

Ext.create( name, [args] ) ：创建指定类的实例。

参数：

①name {function} ：需要创建实例的类名或别名。

②args {object} 可选 ：初始化实例时的传参。

返回值：

{object} ：返回实例。

2.2.1 Ext.create('Ext.panel.Panel', {})

Ext.create('Ext.panel.Panel', {}) ：表示创建一个 panel 组件。

renderTo: Ext.getBody() ：在Body区域里呈现此组件。

2.2.2 Ext.create('Ext.form.Display', {})

Ext.create('Ext.form.Display', {}) ：创建一个 Display 组件。

在这个示例中，我们把 Display组件放入到 panel 容器里了。

End
菜单加载中...

ExtJS 4.2 第一个程序的更多相关文章

  1. Android开发-之第一个程序：HelloWorld！

    小编觉得不管学习什么编程的时候,第一个程序都是要求打印输出一个"HelloWorld!",那就从最简单的HelloWorld开始吧!哈哈~~~~ 一.创建一个Android工程 1 ...

  2. [Fluent NHibernate]第一个程序

    目录 写在前面 Fluent Nhibernate简介 基本配置 总结 写在前面 在耗时两月,NHibernate系列出炉这篇文章中,很多园友说了Fluent Nhibernate的东东,也激起我的兴 ...

  3. rails再体验（第一个程序）

    掌握redmine plugin开发的目标在2016年未实现,2017年继续. 选择<Ruby on Rails Tutorial>教程,windows安装railsinstaller,该 ...

  4. OpenGL学习笔记1——第一个程序

    学习的参考书基本是按照GL编程指南,如果有消息机制概念,对于GLUT的理解是很自然的.下面就按照自己写的第一个程序详细解释一下GL,还是比较容易上手的. 程序实现的功能是,根据当前随即种子摇出来的结果 ...

  5. Android 第一个程序 及 环境搭配

    一. JDK配置 1.找到jdk安装路径 2.配置环境变量(建议配置在系统变量里面) 1).配置JAVA_HOME变量 2).配置 CLASSPATH 环境变量 CLASSPATH=.;%JAVA_H ...

  6. unix 网路编程（卷一）第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  7. Hadoop学习历程（三、第一个程序）

    根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...

  8. Python2.7.3 学习——第一个程序 Hello Python World

    Hello World 每学一门语言开始的第一程序都是Hello World ,当然了Python也不例外,下面开始我们的Python第一个程序编写: 1,命令行: (1)打开终端,输入python, ...

  9. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

随机推荐

  1. C++实现线程安全的单例模式

    在某些应用环境下面,一个类只允许有一个实例,这就是著名的单例模式.单例模式分为懒汉模式,跟饿汉模式两种. 首先给出饿汉模式的实现 template <class T> class sing ...

  2. Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...

  3. Appium移动自动化框架

    引言:Appium 是一个移动端自动化测试开源工具,可以针对不同的平台用一套API来编写测试用例.本文对Appium自动化测试框架的功能进行了概括. 本文选自<软件自动化测试开发>. Ap ...

  4. PowerShell过滤文件中的重复内容

    Get-Content -Path E:\test11\data.txt | Sort-Object | Get-Unique 源文件: AA0001 2014-06-30 15:27:13.073 ...

  5. 9、委托、事件、Lambda

    开始 关于委托,肯定是要有问题的. 第一个问题,委托用来干什么? 看.net中的表述:在.net平台下,委托类型用来定义和相应应用程序中的回调.(回调?处理内存中两个实体双向通信的一种技术.)   第 ...

  6. OEL上使用yum install oracle-validated 简化主机配置工作

    环境:OEL 5.7 + Oracle 10.2.0.5 RAC 如果你正在用OEL(Oracle Enterprise Linux)系统部署Oracle,那么可以使用yum安装oracle-vali ...

  7. Entity Framework的启动速度优化

    最近开发的服务放到IIS上寄宿之后,遇到一些现象,比如刚部署之后,第一次启动很慢:程序放置一会儿,再次请求也会比较慢.比如第一个问题,可以解释为初次请求某一个服务的时候,需要把程序集加载到内存中可能比 ...

  8. 基于Composer Player 模型加载和相关属性设置

    主要是基于达索软件Composer Player.的基础上做些二次开发. public class ComposerToolBarSetting { public bool AntiAliasingO ...

  9. [算法]——快速排序（Quick Sort）

    顾名思义,快速排序(quick sort)速度十分快,时间复杂度为O(nlogn).虽然从此角度讲,也有很多排序算法如归并排序.堆排序甚至希尔排序等,都能达到如此快速,但是快速排序使用更加广泛,以至于 ...

  10. EC笔记：第4部分：20、传递引用代替传值

    考虑以下场景: #include <iostream> #include <string> using namespace std; struct Person { strin ...