`
lxwt909
  • 浏览: 572706 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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源代码上传到附件。

  • 大小: 310.9 KB
  • 大小: 56.4 KB
  • 大小: 103.5 KB
  • 大小: 563.3 KB
  • 大小: 27.5 KB
  • 大小: 24.7 KB
分享到:
评论

相关推荐

    extjs4学习文档

    创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...

    extjs4 helloworld

    标题“extjs4 helloworld”指的是使用Ext JS 4框架创建的一个基础的“Hello, World”应用程序。Ext JS是一个强大的JavaScript库,用于构建富客户端Web应用程序。它提供了一个全面的组件模型,允许开发者构建复杂的...

    ExtJS helloworld.html

    简单的ExtJS版的helloworld.html代码

    ExtJS----HelloWorld程序源码

    5. **创建面板(Panel)**:“HelloWorld”通常会展示在一个面板中。在ExtJS中,你可以创建一个`Ext.container.Viewport`对象,它会占据整个浏览器窗口,然后在其中添加你的组件。 6. **文本组件(Label)**:显示...

    HelloWorld.rar

    在"HelloWorld.rar"这个压缩包中,我们很显然会找到一个基础的ExtJS项目,用于初学者学习和理解如何在实践中应用和导入ExtJS组件库。 在深入探讨之前,先来了解一下ExtJS的核心特性。ExtJS 提供了一个丰富的组件...

    Extjs4 学习指南

    这只是ExtJS 4学习之旅的开始。随着深入学习,你会接触到更多的组件(如表格、表单、树形视图等)、布局管理、数据绑定、Ajax通信以及高级主题,如性能优化和自定义组件开发。记住,不断实践和参考官方文档是提升...

    Extjs4.0学习指南

    这只是ExtJS4学习之旅的开始。在深入学习过程中,你将接触到更多的组件(如Grids、Forms、Trees等)、布局管理、数据绑定、Ajax交互以及图表等功能。理解并熟练掌握这些概念和API,将使你能够构建功能丰富、用户体验...

    extjs4 学习指南 学习手册

    helloworld.js 包含一个简单的EXTJS应用,创建一个具有标题和内容的Panel。helloworld.html 引入了必要的CSS和JavaScript文件。确保文件路径正确,然后通过浏览器访问http://localhost:8080/Ext4/helloworld.html,...

    SpinkaJS:使用 ExtJS 库的示例 hello world 项目

    SpinkaJS 项目: 问题跟踪器: CI: 演示: : 使用 ExtJS 库的示例 hello world 项目

    extjs入门之helloword

    这篇博客“extjs入门之hello world”应该是引导初学者了解并开始使用ExtJS的基本步骤。由于描述部分是空的,我们将主要依据标题和标签来探讨相关知识点。 首先,让我们来看看“源码”这个标签。在学习任何编程技术...

    EXTjs4学习指南

    例如,你可以创建一个名为"helloworld.js"的文件,包含以下代码: ```javascript Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: ...

    Extjs4.0学习指南(中文)

    在 Webroot 目录下创建名为 `helloworld.js` 的文件,输入以下代码: ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout: 'fit', ...

    Extjs4 Extjs4学习指南

    - **API文档**:访问`http://localhost:8080/Ext4/docs/index.html`可查看Extjs4的API文档,这是了解和学习Extjs4功能的主要途径之一。 - **示例页面**:通过`http://localhost:8080/Ext4/examples/index.html`可以...

    ExtJs 学习笔记 Hello World!第1/2页

    首先,ExtJS的"Hello World"示例通常涉及到引入必要的库文件。在开始使用ExtJS之前,你需要从官方网站(http://extjs.com/products/extjs/download.php)下载框架的最新版本。解压后,你会看到包含adapter、build、...

    ExtJS4学习指南

    - 在WebRoot目录下创建名为`HelloWorld.js`的JavaScript文件。 - 编写如下内容: ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext.create('Ext.container.Viewport', { layout...

Global site tag (gtag.js) - Google Analytics