实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难。作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验,这是一条非常快速的学习途径。
从今天开始我将完成一系列ExtJS使用中常常用到的功能,并通过例子的形式告诉大家如何一步一步的完成,相信我,ExtJS并不可怕!
本系列教程以代码演示为主,代码讲解相结合,尽量将ExtJS的学习难度降到最低。
要学习本系列教程,你需要具有以下知识:
- 熟悉Javascript的语法,了解DOM机制
- 具备CSS基础知识
- 最好对ASP.NET编程有所了解(不是必须的,只因为服务器代码使用了ASP.NET MVC)
今天我将带领初学者朋友完成第一个例子,将ExtJS引入到你的项目中,并搭建一个模板,我们后续的例子都将以这个模板为基础进行编码。
获取ExtJS
ExtJS的官网地址:http://www.sencha.com/products/extjs
在这个网址上面,我们可以下载到ExtJS的最新版本。目前,ExtJS的最新版是4.2.1,我们将使用这个版本进行讲解。ExtJS 4.x 做了很大的改变,对3.x是不兼容的。
在页面中,我们可以找到下载按钮,下载最新这个版本的ExtJS。下载完成以后对它进行解压,接下来我们将完成Hello World 示例。
Hello World 示例
—— 我相信从无到有的过程绝对是开天辟地的。所以请尊重Hello World这个例子。
下载完以后,我们需要对压缩包进行解压。ExtJS 是开源的,所以压缩包中包含了很多源代码和调试用的一些东西,这些东西对我们开发工程中的调试很有用,但在引用的时候,我们只需要使用到:
- ext-all.js
- locale/ext-lang-zh_CN.js
- resources/css/ext-all.css
这些文件的说明如下:
- ExtJS的压缩代码,在生产环境中使用,开发中我们可以使用ext-all-debug.js来代替,方便调试。
- 简体中文语言包。
- ExtJS的样式文件,如果要更换其它主题,只需要将它替换成其它的主题文件即可。
了解了这些内容,我们就可以很轻松的完成Hello World示例了。
第一步,新建一个html文件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> </head> <body> </body> </html>
第二步,添加上述的三个文件引用
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> </head>
第三步,完成编码
我们的编码很简单,为了方便演示,我们只在页面加载完成的时候弹出一个对话框,在对话框中显示“Hello World”。代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>实用ExtJS教程100例-001:开天辟地的Hello World - www.qeefee.com</title> <script src="extjs-4.2.1/ext-all.js"></script> <script src="extjs-4.2.1/locale/ext-lang-zh_CN.js"></script> <link href="extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" /> <script type="text/javascript"> </script>
代码说明:
首先在head标签中添加一个script标签,用来在里面添加我们自己的js代码
然后调用Ext.onReady()方法,这个方法会在DOM加载完成以后调用传入的方法,如果使用过jquery,这个方法就不难理解。通常我们会将代码放在页面加载完成以后执行。
在传入的方法中,我们使用Ext.MessageBox.alert()方法弹出一个对话框,这个方法的第一个参数的标题,第二个参数是内容。
我们的页面在浏览器中的效果如下:
这个对话框显得非常精美,显得非常专业,可以用高端大气上档次来形容了,这也是为什么那么多人喜欢ExtJS的原因。
在ASP.NET MVC中搭建模板
看到了吧,如果我们决定动手的时候,ExtJS也并不是那么麻烦,一个简单的Hello World已经把你带入ExtJS的世界,在这个世界里还有更多更好玩儿的东西等着你来发现,但在出发之前,我们先来完善一下装备吧。
由于我比较擅长使用ASP.NET,本系列的例子将使用ASP.NET MVC来提供服务器端的支撑。由于ExtJS的平台无关性(只与浏览器有关),Java和php方面的朋友也可以毫无顾忌的参考这些例子。
在使用ASP.NET MVC的时候,我们通常会用到layout页面,我们来完成一个通用的layout页面,在接下来的示例中,我们都将使用这个布局页为基础进行编码。
我们创建好一个MVC项目,项目结构图如下:
接下来我们创建一个layout.cshtml,并修改代码:
<!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title><link href="~/Resources/extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" /><script src="~/Resources/extjs-4.2.1/ext-all.js"></script><script src="~/Resources/extjs-4.2.1/locale/ext-lang-zh_CN.js"></script>@RenderSection("script", false) </head> <body><div>@RenderBody()</div> </body> </html>
我们只添加了ExtJS的相关引用,然后在head标签中添加了script节点的绘制。接下来我们看看这个layout页是否能正确的完成任务,我们来将刚才的HelloWorld示例使用布局页重新完成一次。
第一步,在HomeController中添加HelloWorld方法:
public ActionResult HelloWorld() {return View(); }
第二步,为HelloWorld方法添加视图:
@{ ViewBag.Title = "HelloWorld"; }<h2>HelloWorld</h2>
第三步,创建一个JS文件,用来完成编码
我们在项目根目录中创建一个JSApp目录,将示例用到的JS代码都放在这个目录下面。
在JSApp目录中创建一个Home文件夹,用来对应HomeController,然后在下面创建一个HelloWorld.js,用来对应HomeController中的HelloWorld方法。这算是一种约定吧,以后我们也会遵循这种约定。
HelloWorld.js代码如下:
Ext.onReady(function () {Ext.MessageBox.alert("提示", "Hello world"); });
第四步,修改我们的HelloWorld视图页面
修改这个视图页面,将HelloWorld.js引入页面中,修改后的代码如下:
@{ ViewBag.Title = "实用ExtJS教程100例-001:开天辟地的Hello World - www.qeefee.com"; } @section script{ <script src="~/JSApp/Home/HelloWorld.js"></script> }
完成上面的四步以后,运行程序,在浏览器中的截图如下:
还不错,模板页已经正常工作了。在以后的示例中,我们将使用这四个步骤来添加演示的代码。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/extjs-example-001.html,如需转载请自行联系原作者
实用ExtJS教程100例-001:开天辟地的Hello World相关推荐
- 实用ExtJS教程100例-006:ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
- 实用ExtJS教程100例-002:MessageBox的三种用法
在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox. Ext.MessageBox.alert() 这个方法用来打开一个普通的对话框,对话框 ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- python菜鸟教程100例-对菜鸟教程的Python一百例的个别改进
开篇语 好吧,其实是我小妹子Python公选课结课,所以我来帮忙做个大作业(简单到哭的大作业好吗?)!她的大作业就是老师把菜鸟教程的Python一百例扒下来做成文档,然后让学生自己找三个验证下!我们当 ...
- python菜鸟教程100例-Python 练习实例4
#19 ym 853***877@qq.com 10 参考解法: #!/usr/bin/python # -*- coding: UTF-8 -*- year=int(raw_input(" ...
- python菜鸟教程100例-Python 练习实例14
#15 小天儿 102***9045@qq.com 14 使用 Python3 的参考解法: #!/usr/bin/python3 x = int(input("是否进入循环?是:1, 否: ...
- python菜鸟教程100例-Python 练习实例1
#16 zavier 126***0796@qq.com 49 使用列表形式,并计算总结: #!/usr/bin/python # -*- coding: UTF-8 -*- # 原答案没有指出三位数 ...
- python菜鸟教程100例-Python 基础教程 | 菜鸟教程
Python 基础教程 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言. Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年. 像P ...
- 菜鸟教程Python教程100例(三)(持续更新)
1.给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. num = 12345 str1 = str(num) print('它是%d位数' % len(str1)) prin ...
最新文章
- java的工厂类_深入理解Java的三种工厂模式
- bootstrap的php写在哪里,bootstrap用什么编辑器写
- 详细讲解JAVA中的IO流
- Detectron-MaskRCnn:Mask判别和获取前向Mask的标签
- RH124-3 目录结构_转
- 免费体验,阿里云智能LOGO帮你解决设计难题
- 当有多个click事件时的简易做法
- MySql视图、存储过程、函数、索引
- 如何查看dSYM文件的UUID?
- MOSS 中的计算公式
- BIGEMAP中打开高清卫星影像谷歌地图
- 【日常】纪录一个愚蠢的问题
- 东营计算机考试,2018年东营市上半年计算机等级考试报名时间
- 软件版本中的Alpha,Beta,RC,Trial是什么意思
- android web3j 代币查询_ERC20代币转账以及余额查询--java(web3j)
- Android 服务动态发现 SPA 之 Auto Service
- 21届秋招记录——银行篇
- 《Java程序设计》课程代码题(九)
- 掌财社:前端接口怎么实现canvas动态图形效果?方法详情!
- java的山形命名_厦门“鸡地名”共有20处 多因山形像鸡而得名
热门文章
- 2021-09-08 集成学 习 思想概述
- 图解Python机器学习pdf 中日双语 第1页
- samp服务器显示,如何测量我的(SAMP)服务器的带宽使用情况?
- Pycharm连接远程服务器环境搭建
- JAVA----简单的自旋锁
- 机器学习相关博客收藏(KL 散度、信息熵、谱聚类、EM、Isolation Kernel、iForest、元学习、小样本学习、课程学习)
- Kinect 2.0 高帧率 同分辨率采集RGB-D图像并保存,并显示人体骨架
- c语言怎么设计程序框图,C语言课程设计————写下流程图! 谢谢
- php多进程结合Linux利器split命令实现把大文件分批高效处理
- Es6 类class的关键 super、static、constructor、new.target