[ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347
本文作者:sushengmiyan
-------------------------------------------------------------------------------------------------------------------
翻译来源:http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html
--------------------------------------------------------------------------------------------------------------------
这篇指引提供了一个简单的ext js介绍,我们会从讨论建立一个简单的hello world例子开始我们的体验。我们会接着讲解在extjs中代码是怎样的结构,这个指导同样也会包括一些其他可以使用的资源的链接,所以,你应该尽可能的多看一些来提升你对ext的认知程度。
helloworld
----------------------
来体验ext js 5很简单,我们先创建一个文件夹,将ext5包放入(下载地址:http://download.csdn.net/detail/sushengmiyan/7701943),再创建一个简单的html文件,建立如下的目录结构,如图:
我们命名的index.html的内容如下:
<html>
<head>
<title>Welcome to Ext JS!</title>
<link rel="stylesheet" type="text/css" href="ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="ext-5.0.0/build/ext-all.js"></script>
<script type="text/javascript" src="ext-5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> <script type ="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
像jQuery或者AngularJS囊括了html的声明标记,但是ext js不是这样,你只需要在我们内部类辅助系统和js中书写就够了。你可以看到像如下结构的例子:
Ext.create('Ext.Panel', {
renderTo : Ext.getBody(),
width : 200,
height : 150,
bodyPadding : 5,
title : 'Hello World',
html : 'Hello <b>World</b>...'
});
现在讲上述代码嵌入到你的app.js文件中,在index.html同级目录下新建app.js内容粘贴上去即可。
如果你现在刷新页面,你可能无法看到运行结果,因为现在框架还没有被完全加载。这就是为什么我们需要在应用程序中增加launch()函数,这个函数是当页面准备结束的时候就被调用。
现在我们给app.js内容替换为如下:
Ext.application({
name: "ExtJSTest",
launch: function(){
Ext.create('Ext.Panel', {
renderTo : Ext.getBody(),
width : 200,
height : 150,
bodyPadding : 5,
title : 'Hello World',
html : 'Hello <b>World</b>...'
});
}
});
在IE8中运行有提示错误,但是在chrom中完全可以,看到如下结果:
这个例子说明了开始ext js 5是多么简单,从这里,天空是你的极限。你可以探索ext js 5的许多功能通过研究我们的例子,它们给出了框架工具盒能力的伟大介绍。
ext-all.js
----------
我们应该注意到,index.html中ext-all.js和ext-them-neptune.css是被完全包含进来的,这个对于我们练习来说是合适的,但是当你想只用框架的部分来发布应用程序的时候就不太适合了。你可以根据你的工程的需要来简化你的框架。
你可以参考 getting started guide 来获取更多的关于这方面的extjs5和sencha cmd 的介绍。
请继续阅读关于extjs5的核心。
什么是extjs
------------------------
Ext JS 5是一个JavaScript应用程序框架,它为您提供了一整套工具用于创建跨平台的应用程序。Ext JS 5支持所有现代浏览器,IE8的最新版本以及Chrome和介于两者之间的。
Ext JS是面向对象的、基于类库的,这意味着它的设计允许您的应用程序范围从单个开发人员到多团队的企业。让我们打破这些概念的一些你不熟悉的术语。
面向对象编程
面向对象编程(OOP)是一个模块化的方式设置为可重用的代码,使碎片。这也使代码更易于维护比常见的“内联”脚本编码与许多其他JavaScript库。
而不是使一个巨大的项目,说计划可以分为连接部分,最终,会让事情更容易维护和规模。
阅读更多关于面向对象编程的基础知识。
类和对象
OOP的关键概念包括类和对象。一个类是一个抽象的定义应用程序的一个组件。这是一个简单的抽象基础水平的“东西”。这个类可以作为表示类的对象实例。在这一点上,抽象的对象包含的所有信息,除了任何其他部分的扩展。
现在我们开始另一个例子来展示extjs的类系统,我们还是从上述的index.html和app.js开始。
我们先来定义一个类:我们定义一个panel类如下:
Ext.define(
'MyApp.MyPanel',
{ extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' });
你可以看到,我们定义了一个东西叫做MyPanel,它继承于ext js panel类 现在我们可以使用这个模板来创建一个新的对象。
或许我们需要两个面板,他们之间的唯一区别就是内容不一样,我们就可以创建两个实例,现在你的app.js内容应该像下面这样:
Ext.define(
'ExtJSTest.MyPanel',
{ extend : 'Ext.Panel', title : 'Hello World', html : 'Hello <b>World</b>...' }); Ext.application({
name: "ExtJSTest",
launch: function(){ Ext.create('ExtJSTest.MyPanel', {
renderTo : Ext.getBody(),
title : 'MyFirst Panel',
html : 'MyFirst Panel'
});
Ext.create('ExtJSTest.MyPanel', {
renderTo : Ext.getBody(),
title : 'MySecend Panel',
html : 'MySecend Panel'
});
}
});
刷新index.html可以看到如下效果:
如你所见,这可以让你重复使用一段基代码,但是也可以达到我们不同的需要。虽然这是一个简单的例子,使用和扩展Ext JS类是一个非常强大的机制,将帮助您创建清洁和可维护的代码。
你可以阅读更多关于我们班的内部系统。
注意:这个方法是“嵌入”例如目的。如果你写一个真正的应用程序中,您会MyApp.view.MyPanel视图在一个单独的文件。此外,在控制器中创建语句会或发射()函数。
你可以在这里阅读更多关于应用程序体系结构。
比helloWorld更深一层
----------------------------------------------
你现在已经看到了我们创建helloworld的例子,如果你对sencha 框架式不熟悉的话,它可能看起来像稍微正常语法,你可能需要创建一些那么简单的东西。让我们看看网格,这样你可以看到最真实的情况下如何利用少量的语法来创建真正令人印象深刻的输出。
在这个例子中,我们会产生Ext.grid.panel,其中包含一行编辑插件和几行数据。查看此示例,只需你app.js文件的内容替换为以下代码:
Ext.application({
name : 'MyApp', launch : function() { Ext.widget({
renderTo : Ext.getBody(),
xtype : 'grid',
title : 'Grid',
width : 650,
height : 300,
plugins : 'rowediting',
store : {
fields : [ 'name', 'age', 'votes', 'credits' ],
data : [
[ 'Bill', 35, 10, 427 ],
[ 'Fred', 22, 4, 42 ]
]
},
columns: {
defaults: {
editor : 'numberfield',
width : 120
},
items: [
{ text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' },
{ text: 'Age', dataIndex: 'age' },
{ text: 'Votes', dataIndex: 'votes' },
{ text: 'Credits', dataIndex: 'credits' }
]
}
})
}
});
当你刷新浏览器的时候,可以看到如下效果:
你在这里看到的是一个功能齐全的Ext JS网格。这个网格包含可排序的可移动的列也是可拖放的。这些列可以利用网格头下的列选项的下拉菜单显示和隐藏。这个网格还包含一行通过双击激活任何行的编辑器。这些行包含可编辑的文本字段和一个有用的和有吸引力的用户界面。
真正神奇的事情是,你得到这个在大约30行代码。这种功能带有网格在默认情况下,这意味着更少的时间添加功能。唯一的添加到这个示例是行编辑器,它只需要一行配置被添加到您的网格。
这应该说明一旦你熟悉语法Ext JS可以节省你多少时间。最后,你节省时间和用户与应用程序功能丰富的经验。
注意:在一个真实世界的例子,您将使用一个单独的存储和模型来填充你的网格数据。
你可以在我们的应用程序架构指南中阅读更多关于Ext.data.store和Ext.data.model
下节内容:
--------------------
既然你已经看到了启动是如此的简单,那么你就可以看一些比较高深的知识了。
你可以在如下地址找到extjs的doc文档:http://docs.sencha.com/extjs/5.0.0/
下一步我们就要学习:
1.set up and geting started
2.the class system
3.layouts and containers
4.enwents in ext js
5.examples
[ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用的更多相关文章
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan ----------------- ...
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...
- [shiro学习笔记]第四节 使用源代码生成Shiro的CHM格式的API文档
版本为1.2.3的shiro API chm个事故文档生成. 获取shiro源代码 编译生成API文档 转换成chm格式 API 获取shiro源代码 shiro官网: http://shiro.ap ...
- [ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
本文地址:http://blog.csdn.net/sushengmiyan/article/details/41242993 本文作者:sushengmiyan ------------------ ...
随机推荐
- [SHOI2001]化工厂装箱员
题目描述 118号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有3种不同的纯度,A:100%,B:1%,C:0.01%,为了出售方便,必须 ...
- [Educational Codeforces Round#22]
来自FallDream的博客,未经允许,请勿转载,谢谢. 晚上去clj博客逛来逛去很开心,突然同学提醒了一下,发现cf已经开始40分钟了,慌的一B,从B题开始写,写完了B到E最后收掉了A,结果太着急B ...
- c语言的第四次作业
(一)改错题 输出三角形的面积和周长,输入三角形的三条边a.b.c,如果能构成一个三角形,输出面积area和周长perimeter(保留2位小数):否则,输出"These sides do ...
- Selenium之unittest测试框架详谈及实操
申明:本文是基于python3.x及selenium3.x. unittest,也可以称为PyUnit,可以用来创建全面的测试套件,可以用于单元自动化测试(模块).功能自动化测试(UI)等等. 官方文 ...
- h5的localStorage和sessionStorage
今天做了个首页的弹窗,要求是打开时显示弹窗,然后点击关闭按钮时弹窗关闭,然后点击不再显示,之后再刷新就不会有弹窗,总结一下需求. 1.弹窗显示隐藏 这个很容易,我们可以用display:none和di ...
- selenium登录163邮箱
环境:windows8 python2.7+selenium+chrome 直接上脚本: # coding=utf-8from selenium import webdriverimport tim ...
- Linux平台安装MongoDB
MongoDB 提供了 linux 各发行版本 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download-center#community ...
- RabbitMQ环境安装
1.安装erlang 语言环境 安装依赖 yum install ncurses-devel (如果没安装GCC,执行 yum install gcc或者:yum groupinstall " ...
- spring web项目下,判断项目是否启动完成
本文同时发布于见鬼网:https://faceghost.com/article/483341 概述:spring 加载完成后,我们有时候会做一些初始化工作,如加载一些缓存,DB,等,这里采用实现Se ...
- Git 常用命令速查表