ExtJS5学习之Hello World

简介:

ExtJS5已经发布很久了,还没学过,没什么原因,因为我很懒,哈哈,趁着有空,记录一下学习过程,这也是第一次在iteye写博客,没什么原因,因为我很懒。 :D 首先去官网下载ExtJS5的压缩包,首先你需要注册一个帐号,然后官网会往你注册的邮箱里发送一封邮件,邮件里会有试用下载地址。下载完成解压到任意目录后,你会得到如同这样的目录,

 然后打开你的Eclipse,新建一个web project,如图:


 在WebContent目录下新建一个extjs目录,然后把下载下来的extjs压缩包里的ext-all.js复制到刚刚新建的extjs目录下,然后新建一个ext-theme-classic文件夹,用于存放extjs的主题皮肤文件,虽然extjs5默认皮肤不再是classic(默认的经典蓝),而是neptune,我感觉这皮肤很丑,可能是ExtJS在跟风扁平化设计吧。ExtJS5的皮肤文件都存放在G:\Java-zipfile\ext-5.1.0\build\packages下(G:\Java-zipfile\ext-5.1.0是我的ExtJS压缩包解压目录),把ext-theme-classic-all.css主题样式文件和ext-theme-classic.js主题js文件copy到新建的ext-theme-classic文件夹下,然后把该主题有关的图片资源文件复制到ext-theme-classic文件夹下,到此,我们学习ExtJS5需要的基础环境就弄好了,最后文件结构如图:


 

写个JSP页面测试一下吧


 部署项目,运行测试看下效果图,如图能正常显示一个ExtJS窗体,说明第一个Hello World demo程序就编写成功了!但很不幸的是,ExtJS为了逼用户付费使用它的产品,在他们的组件上添加了 ExtJS Trial等字样,确实把我恶心到了,但是这些是可以通过修改主题样式文件来去除的,因为我使用的classic经典蓝色主题,我们就只需要打开ext-theme-classic-all.css文件,搜索所有ExtJS Trial字样删除它即可,如果你使用的是其他主题同理。


未修改主题样式文件之前显示如下:


 去除了ExtJS Trial试用字样后如图:


 恶心的试用字样是去掉了,但不代表你就随心所欲的使用ExtJS5,正式商业用途还是乖乖付费吧,自己学习玩玩就无所谓啦!好了,Hello World就到此为止了。

转载:http://iamyida.iteye.com/blog/2180861

目录
相关文章
|
JavaScript
js基础笔记学习210HelloWorld
js基础笔记学习210HelloWorld
55 0
js基础笔记学习210HelloWorld
|
JavaScript
js基础笔记学习3-HelloWorld
js基础笔记学习3-HelloWorld
46 0
js基础笔记学习3-HelloWorld
|
JavaScript
Vue 2 阅读理解(五)之 HTMLParserOptions.start()
Vue 2 阅读理解(五)之 HTMLParserOptions.start()
95 1
|
JavaScript 前端开发 Java
JS基础教程3——输出
在js中每句话的结尾最好加上;(同java等语言),不加也能运行,但是建议加上。
JS基础教程3——输出
|
Web App开发 缓存 JavaScript
JavaScript | Hello World?【三】
JavaScript | Hello World?【三】
112 0
|
前端开发 JavaScript
#yyds干货盘点# 【js学习笔记二十】前端eval的使用
#yyds干货盘点# 【js学习笔记二十】前端eval的使用
96 0
#yyds干货盘点# 【js学习笔记二十】前端eval的使用
JavaScript---网络编程(8)-DHTML技术演示(1)-2
JavaScript---网络编程(8)-DHTML技术演示
114 0
JavaScript---网络编程(8)-DHTML技术演示(1)-2
|
JavaScript 前端开发
JavaScript---网络编程(8)-DHTML技术演示(1)-1
JavaScript---网络编程(8)-DHTML技术演示(1)
126 0
JavaScript---网络编程(8)-DHTML技术演示(1)-1