ExtJs初探（一）- 下载及配置入项目（eclipse+Springboot+maven）

刚刚开始接触ExtJs的小白，首先先摸一下“敌人” 的底，然后是下载，最后把其配置入你的项目中，本文使用的是ext-6.6.0-trial，下载地址：https://www.sencha.com/products/extjs/evaluate/

一、什么是ExtJs

ExtJs是用JavaScript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端JS框架，可用于.Net、Java、Php等应用中，其基于MVC/MVVM架构，突出特性为：

可定制的UI小部件与丰富的UI集合，如网格，枢轴网格，表单，图表，树木。
新版本与旧版本的代码兼容性。
灵活的布局管理器有助于组织跨多个浏览器，设备和屏幕大小的数据和内容显示。
高级数据包将UI小部件与数据层分离。数据包允许客户端使用高度功能的模型收集数据，这些模型支持排序和过滤等功能。
它是协议不可知的，并且可以从任何后端源访问数据。
可定制的主题Ext JS窗口小部件提供了跨平台一致的多个现成主题。

二、ExtJs下载

下载完后你得到一个压缩包，以6.6.0为例，解压后得到的目录为：

一开始看到这样有点蒙，东西真多，但实际上你要引入项目用到的并不多（看你项目需求），关键的几个：

1、build下的ext.js

2、build下的ext-all.js或ext-all-debug.js（debug好像会报错时给的信息更多）

3、resources文件夹（在我看来这个6.6.0版本下的resources文件夹没有半点作用，但是可能对于其他的版本里面会有你需要到的东西）

4、你需要的样式主题，在build/classic下，有很多，只需要一个你想要的主题加入你的项目即可：

扫描二维码关注公众号，回复： 4476931 查看本文章

三、配置入项目

Java的项目，用了springboot+maven，别的项目自己看着怎么配置吧，估计都是差不多的了

直接上图吧，注意标红色的地方，maven项目的结构如果有不清楚的可以自己去百度查查了，然后在static文件夹下，我建立了js/extjs6.6.0文件夹，把用到的Extjs相关 - 上面提到的那些必要文件和文件夹放入项目中。

四、测试可以使用ExtJs

1、ExtJs样式css

2、ExtJs核心文件

3、ExtJs最基础最简单的也是弹框，我们在项目中写个script就好，等Ext准备好后显示一个弹框，代码如下：

Ext.onReady(function () {
    console.log("extjs准备完毕");
    extjsMessage();

 });
        
function extjsMessage(){
	var content = 'wellcom-extjs';
	Ext.MessageBox.alert('extjs', content);
}

到此我们就配置完了，可以愉快的和ExtJs玩耍了。

ExtJs初探（一）- 下载及配置入项目（eclipse+Springboot+maven）

猜你喜欢