Ext.js学习笔记(一)环境搭建以及helloworld
作为一个刚刚实习的新人;
作为一个在大学主学.NET的;
作为一个刚进公司要学习加瓦的;
作为一个技术菜鸟和职场大白菜;
要学Java,要学js,要学jsp,要学Oracle,要学perl,要学正则表达式。。。。。。。
还有很多扩展的东西,以及熟悉公司的软件等等等等。。。。。。。。。。。。。。。
小菜表示要发奋图强,希望亲们指导加鼓励,谢谢!
目录:
1.Ext.js简介:
作为学习过.NET的人,这种东西很容易理解,在.NET下可以拖已经写好了的控件,来完成基本的界面,Ext.js也是已经写好的库,里面包含各种已经写好的东东,用来帮助你完成精美的界面。
引用一句话@百度百科: “ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。”
无图无真相,先贴一张示例图
我只是打开了一个官方示例额,怎么样?还不错吧,很多公司做系统什么的都在用着东西,作为一个库,可以在不同平台使用,比如.NET下
2.环境搭建:
需要下载Ext.js库(下载地址:http://extjs.org.cn/node/645 )解压添加到你的web项目中去
比如我的:
Ext.Js的API包含很多东西,引用官网的:“
- builds:是extjs压缩后的代码,体积更小,加载更快
- docs :文档中心
- examples:大量示例
- locale:多国语言的资源文件
- overview:extjs的功能简述
- pkgs:extjs各部分功能的打包文件
- resource:运行所需的图片文件与样式文件。
- src:未压缩过的代码目录
- bootstrap.js:extjs库的引导文件
- ext-all.js :必须引入的核心库
- ext-all-debug.js:ext-all.js的调试版
“了解一下就ok了!
中文API文档地址:http://extjs-doc-cn.github.io/ext4api/#!/api
我用的是aptana开发工具(下载地址:http://www.aptana.com/ )
当然你也可以用别的开发环境,不懂可以问我,虽然我是小菜,但是可以一起讨论,一起进步。
3.helloworld
index.html里面代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>index.html</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <link rel="stylesheet" type="text/css" href="WEB-INF/lib/extjs/resources/css/ext-all.css"> 7 <script type="text/javascript" src="WEB-INF/lib/extjs/ext-all.js"></script> 8 <script type="text/javascript"> 9 Ext.onReady(function() 10 { 11 Ext.MessageBox.alert(‘Hello ‘, ‘ExtJs我来了.....‘); 12 }); 13 </script> 14 </head> 15 <body style="color: red"> 16 <center> 17 <br/><br /><br/><br /><br /><br/> 18 <font size="10">This is a HTML page with Ext.js. <br></font> 19 </center> 20 </body> 21 </html>
说明: 这两句是必须的哦!
1: <link rel="stylesheet" type="text/css" href="WEB-INF/lib/extjs/resources/css/ext-all.css">
2: <script type="text/javascript" src="WEB-INF/lib/extjs/ext-all.js"></script>
推荐使用firefox浏览器,开发web,按下F12你就明白了!
结果:
这年头干什么都不容易,希望自己能坚持写博客,不只是分享和总结,也希望可以交到friends!
求指导,求意见!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。