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就到此为止了。我会把demo源代码上传到附件。