ExtJS 4.2 第一个程序
本篇介绍如何创建一个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 容器里了。
转载于:https://www.cnblogs.com/polk6/p/5738789.html
ExtJS 4.2 第一个程序相关推荐
- Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录 一.下载解压 二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试 三.shiro.ini分析 四.Quickstart. ...
- 零起点学算法01——第一个程序Hello World!
零起点学算法01--第一个程序Hello World! Description 题目很简单 输出"Hello World!"(不含引号),并换行. Input 没有输入 Outpu ...
- 她,诗人拜伦之女,英国数学家,历史上第一位程序员
作者丨吴军 来源丨大数据文摘 摘自丨<信息论> 人类使用机械处理信息的尝试是由两个看似不该有交集的英国人开启的. 在英格兰中部莱斯特郡的柯比-马洛里庄园,住着一对母女. 1816年初那个多 ...
- python定义一个变量_Python新手上车3:Python第一个程序和变量
第一个程序 上节内容我们提到了如何安装Python 以及安装配置VSCode,这节内容我们继续介绍第一个程序的建立: 1.在VS的左上角点击建立一个新的程序,命名为 python_0301_code. ...
- 第一个程序01 - 零基础入门学习汇编语言20
第四章:第一个程序01 让编程改变世界 Change the world by program 引言 现在我们将开始编写完整的汇编语言程序,用编译器将它们编译成为可执行文件(如:*.exe文件),在操 ...
- java 怎么让一个jlabel和一个jtextfield在一行_今天小哥大家分享一下Java编程语言的第一个程序应该怎么样去写...
哈喽,各位朋友们大家周六好!我是你们的老朋友90小哥爱数码! 那么,今天小哥要和大家伙儿分享这篇文章的主要内容依然是和Java编程语言有关系,大家都知道在上几篇的文章当中呢小哥分别给大家介绍了Java ...
- java hello work_Java入门教程系列 – 第一个程序 “hello, world”
"Hello, World"程序指的是指在计算机屏幕上输出"Hello, World!"(意为"世界,你好!")这行字符串的计算机程序.一般 ...
- python windows窗口置顶_Python入门:第一个程序“Hello, world”
本文主要内容 安装Python 使用IDLE和基础交互模式 编写一个简单的程序 使用IDLE的Python shell窗口 本章将介绍Python和IDLE的下载.安装和启动过程,IDLE是Pytho ...
- Arduino可穿戴教程之第一个程序——上传运行程序(四)
Arduino可穿戴教程之第一个程序--上传运行程序(四) 2.4.5 上传程序 现在所有Arduino IDE的设置都完成了,我们就可以将示例程序上传到板子中了.这非常简单,只需要单击如图2.45 ...
最新文章
- oracle中怎样查询用户权限
- java格式_java时间格式转换大全
- Python并发编程之:多进程
- 国内第一本项目管理的实践书籍——《IT项目管理那些事儿》
- Goodbye 2017 B
- Vmware Centos中安装vmtools工具
- angular之两种路由
- “羊毛党”玩脱了!90后员工用优惠券狂薅45万被捕
- pytorch 测试每一类_2D UNet++ VGGBlock脑胶质瘤分割BraTs + Pytorch实现
- PHP之路——Xdebug扩展
- 七月算法机器学习1 相关数学基础
- 我的世界服务器自定义翅膀,我的世界翅膀自定义皮肤period; | 手游网游页游攻略大全...
- 计算机记账的优点,记账凭证的优缺点
- Python爬虫-selenium爬取网易云歌单
- 看我如何用Python来分析《斗破苍穹》
- python-django-03-django-ORM入门
- excel组合汇总_Excel汇总20160229
- JavaScript的本地存储和会话存储
- 数据库计算机实验报告总结,计算机软件数据库实验报告.docx
- 每日一题【35】解析几何-抛物线的焦点弦长公式
热门文章
- 初识微信小程序第一弹
- python【数据结构与算法】最长公共子串详解(附代码)
- Confusion matrix
- dell笔记本耳机怎么设置_win10笔记本怎么设置合上盖子不休眠
- java中自定义比较器_Java中的比较器:自定义规则!!!
- 网络营销——网络营销专员如何做好网站外链优化工作?
- 网站图片优化需要注意哪些方面?
- php reactphp wss_workerman的基本用法(示例详解)
- java分解因式_用JAVA因式分解 并以9=3×3格式输出
- opencv sgbm 三维重建_图像三维重建方法综述