ExtJS梦想之旅(一)--第一个ExtJS程序(HelloWorld)
发布时间:2020-12-16 00:58:19 所属栏目:百科 来源:网络整理
导读:前两天一直在学习ExtJS之javascript基础,现在正式开始ExtJS梦想之旅,进入了ExtJS的学习! 一、ExtJS简介 ExtJS是一种RIA(富因特网应用程序)Ajax框架,它天生丽质,使用它开发出来的web应用可以不用美工的参与,也能做很炫丽的页面效果。它使用Javascript
前两天一直在学习ExtJS之javascript基础,现在正式开始ExtJS梦想之旅,进入了ExtJS的学习! 一、ExtJS简介 ExtJS是一种RIA(富因特网应用程序)Ajax框架,它天生丽质,使用它开发出来的web应用可以不用美工的参与,也能做很炫丽的页面效果。它使用Javascript作为开发语言,借鉴了Java中Swing的设计思想,集成了桌面应用的交互性和传统WEB应用的部署灵活性,是一个很好的前端Ajax框架。ExtJS官方网址:http://www.extjs.org.cn/ 二、开始使用ExtJS框架(开发第一个ExtJS程序) 我这里使用的3.4.1版本,目前的版本已经去到4.2版本了。 开发步骤:
第一个HelloWorld程序 html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 第一个Ext程序 --> <!-- 第一步一如Ext的样式文件 --> <link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css"/> <!-- 第二步:一如Ext的库文件(底层驱动) --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 第三步:一如ext-all.js文件 --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- 一如第一个ExtJS程序 --> <script type="text/javascript" src="hello-extjs.js"></script> <title>Hello-ExtJS</title> </head> <body> <div id="hello"></div> </body> </html> js代码: Ext.onReady(function() { // Ext.Msg.alert("第一个Ext窗口","HelloWorld!"); var window = new Ext.Window({ title : "HelloWorld",maximizable : true,width : 300,height : 300,}); window.show(); }); 最终显示效果: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |