本篇介绍如何创建一个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. ASP.NET MVC 请求路径相关参数的获取

    Request.ApplicationPath / Request.CurrentExecutionFilePath /Home/Index Request.FilePath /Home/Index ...

  2. 在Sublime Text 3上安装代码格式化插件CodeFormatter

    1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...

  3. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  4. Android数据加密之SHA安全散列算法

    前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...

  5. angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  6. zookeeper源码分析之一服务端启动过程

    zookeeper简介 zookeeper是为分布式应用提供分布式协作服务的开源软件.它提供了一组简单的原子操作,分布式应用可以基于这些原子操作来实现更高层次的同步服务,配置维护,组管理和命名.zoo ...

  7. 介绍一款原创的四则运算算式生成器：CalculateIt2

    家里小朋友读一年级了,最近每天都有一些10以内的加减法口算练习,作为程序员爸爸,自然也是想办法能够偷懒,让电脑出题,给小朋友做些练习.于是,自己在业余时间开发了一个四则运算算式生成器,名为:Calcu ...

  8. 【干货分享】流程DEMO-外出申请

    流程名: 外出申请  流程相关文件: 流程包.xml  流程说明: 直接导入流程包文件,即可使用本流程  表单:   流程: 图片:2.png DEMO包下载: http://files.cnblog ...

  9. BPM端到端流程解决方案分享

    一.需求分析 1.企业规模的不断发展.管理水平的不断提升,通常伴随着企业各业务板块管理分工更细.更专业,IT系统同样越来越多.越来越专 业化.不可避免的,部门墙和信息孤岛出现了,企业的流程被部门或者I ...

  10. 跟着老男孩教育学Python开发【第三篇】：Python函数

    set 无序,不重复,可嵌套. 函数 创建函数: 1.def关键字,创建函数 2.函数名 3.() 4.函数体 5.返回值 发邮件函数 def sendmail():     import smtpl ...