Search ML NLP Java

ExtJS6从小白到熟练使用(一)——认识ExtJS

先简单介绍一下ExtJS,ExtJS是一款前端框架,它有和特殊之处呢?如果学过JQuery的话,再学习ExtJS,需要忘掉JQuery的那一套,ExtJS与JQuery最大的不同点就是,JQuery是基于DOM或者BOM来进行开发,也就是说,用JQuery之前,至少写好了HTML和CSS,但是ExtJS它根本不用那些,我们只需要写JS就好,而且不是写原生的JS语句,而是写JSON就好。ExtJS里90%的都是JSON。此外,ExtJS开发都是组件化,什么是组件化呢,就是用的所有东西,都是实现好的,我们拿过来用就好了,不需要再像传统的html那样用各种标签和css实现某个UI。这是ExtJS最大的亮点。

OK,既然知道了ExtJS是什么了,那我们先来看看,ExtJS能够开发出什么样的前端程序:http://examples.sencha.com/extjs/6.2.0/examples/admin-dashboard/#dashboard 这个链接是ExtJS官方样例里的效果,是一个后台管理界面,而我们的ExtJS它用的最广泛的,就是各种单页面应用程序,就像后台管理界面这种。
既然知道了ExtJS能够做出这么强大的前端程序,那就来创建一个ExtJS项目,自己真正的了解一番。

学习ExtJS需要的环境:

  • Java环境
  • Sencha CMD — v6.5 https://www.sencha.com/products/extjs/cmd-download/
  • ExtJS 6.5 SDK 链接:https://pan.baidu.com/s/1Q4WVXEJQX0-E4lw-7OP6jw 密码:9he0
    上面提供了两个链接,Sencha CMD的和ExtJS SDK的,首先安装Sencha CMD,安装完成后,打开命令行,输入sencha,会返回sencha cmd的相关信息,就说明安装成功,然后把sdk解压,可以看到里面有很多的文件。项目的环境就搭建好了

下面我们创建项目:
打开命令行,输入 sencha -sdk [SDK所在目录] generate app [-classic|-modern] AppName App
这里需要注意的是 [-classic|-modern],-classic是创建PC端的,-modern创建的是移动端的,如果不选,则两个都存在。AppName指的是这个项目的名称是AppName,App是指这个项目在app文件夹下
笔者的sdk目录在G:\ext6.5,项目创建在G:\ExtJS,整个教程里都是以PC端为主要,所以执行的命令为:
sencha -sdk G:\ext6.5 generate app -classic FirstExtJS firstDemo
稍等一会执行命令完毕,在G:\ExtJS文件夹下就产生了firstDemo文件夹,打开里面就是我们创建好的项目目录
笔者这里用的开发工具是idea,用idea打开项目文件夹,解释一下整个项目目录:

  1. app:就是我们主要开发的目录
    model:用来存放定义的模型
    store:用来存储数据
    view:用来存放UI视图
    Application.js:应用程序的js配置文件
  2. :build:存放编译后的文件
  3. ext:存放ExtJS的一些标准库
  4. resources:资源文件,用来存储用到的图片等等
  5. app.js:整个项目的配置文件,类似1里面的Application.js
  6. bootstrap.js:加载整个项目的配置等等。

需要注意的是,这里的bootstrap并不是bootstrap框架,这里的bootstrap是用来加载整个应用程序的数据,可以把它理解为一个微加载文件,是整个项目的入口文件,我们在index.html里引入这个文件即可。

整个项目的加载流程是:
bootstrap.js -> app.js -> Application.js -> Main.js
bootstrap.js根据配置文件bootstrap.json来设置extjs的类的调用路径、引入css,最后再根据配置文件中的信息,加载app.js。
app.js它是继承自Application.js,所以,app.js会根据Application.js的配置来加载,app.js里也设置了mainView主视图,也就是默认启动加载那个View。

大概是这么个情况,然后,我们在项目目录,运行 sencha app watch 启动一个服务器,然后在浏览器输入localhost:1841 就可以看到我们刚刚创建的项目 ,以及sencha cmd给我们自动生成的一个简单的项目

                                                                                                     --by:小明
赞(8) 打赏
未经允许不得转载:Mayabot技术团队 » ExtJS6从小白到熟练使用(一)——认识ExtJS

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

开源项目

Mynlp开源项目

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏