最近很多人问我在ext js 6+的版本中怎么引入官方的dashboard模版,正好我好久没写博客了,这里我写一篇博客来说明一下。

在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk)

1.创建空白项目

在命令行中输入sencha -sdk D:\ASPX\ext-6.2.1 generate app --classic app D:\ASPX\Test

D:\ASPX\ext-6.2.1 是指sdk目录

generate app --classic app 是创建pc端应用,这个应用的包名是app

D:\ASPX\Test 就是所创建项目的目录了

运行一下项目,效果是这样的,这并不是我们想要的模版

2.移植模版

a.打开你所创建的项目,打开app目录

删掉里面所有的文件

b.找到sdk所在目录,依次打开templates->admin-dashboard->app目录

将app目录里面的文件全部复制并替换到你创建项目的app目录中,在这里是指D:\ASPX\Test\app

返回到sdk所在目录,依次打开templates->admin-dashboard->classic->src目录

同样的将这里面的文件全部复制并替换到你创建项目的app目录中,在这里是指D:\ASPX\Test\app

c.打开你创建项目目录中的app.js文件,修改成以下内容

1.Ext.application({
2.    name: 'app',
3.    extend: 'app.Application',
4.});

打开你创建项目的app目录中的Application.js文件

注意这里的项目包名是Admin,而我们自己创建的包名是app,所以我们需要对代码进行一些修改才可以使用

01.Ext.define('app.Application', {
02.    extend: 'Ext.app.Application',
03.    name: 'app',
04.    stores: [
05.        'NavigationTree'
06.    ],
07.    defaultToken: 'dashboard',
08.    mainView: 'app.view.main.Main',
09.    requires: ['app.*'],
10.    onAppUpdate: function () {
11.        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
12.            function (choice) {
13.                if (choice === 'yes') {
14.                    window.location.reload();
15.                }
16.            }
17.        );
18.    }
19.});

用编辑器自带的工具把app目录下所有js文件中的Admin.包名替换为app. 注意别替换错了。在这里因为我们的项目名称是app所以才替换为app

你自己创建的项目名称是什么替换为对应的名称即可

d.返回到sdk所在目录,依次打开templates->admin-dashboard->resources目录

将这里面的文件全部复制到你创建项目的resources目录中,在这里是指D:\ASPX\Test\resources

f.返回到sdk所在目录,依次打开templates->admin-dashboard->sass目录

将这里面的etc,src,var三个文件夹全部复制并替换到你创建项目的sass目录中,在这里是指D:\ASPX\Test\sass

返回到sdk所在目录,依次打开templates->admin-dashboard->classic->sass目录

将这里面的etc,src,var三个文件夹全部复制并替换到你创建项目的sass目录中,在这里是指D:\ASPX\Test\sass

g.返回到sdk所在目录,依次打开templates->admin-dashboard->overrides目录

将这里面的文件全部复制到你创建项目的overrides目录中,在这里是指D:\ASPX\Test\overrides

h.找到你创建项目中app.json文件,找到requires配置,修改为如下配置

1."requires": [
2.    "charts",
3.    "font-awesome",
4.    "ux"
5.]

3.编译

打开cmd,进入你所创建的项目目录中,这里是指D:\ASPX\Test目录,运行sencha app build命令打包

运行一下项目,这就是我们想要的效果(注:我没有放到服务器中运行,所以看不到具体数据)

4.自定义模版

我们看一下项目结构,简单介绍一下各个目录的作用

01.app目录---------------项目文件目录
02. 
03.  data目录------------数据源目录
04. 
05.     model目录-----------模型目录
06. 
07.     proxy目录------------自定义代理目录
08. 
09.     store目录-------------数据仓库目录
10. 
11.     view目录-------------视图目录
12. 
13.overrides目录---------重写类目录
14. 
15.resources目录--------资源文件目录
16. 
17.sass目录--------------sass样式目录
18. 
19.app.js----------------项目入口文件
20. 
21.app.json-------------项目配置文件

这里我们重点关注app下的view目录与sass目录,目录结构对比如下

以Dialog视图为例,在sass目中下src,var目录下都生成了对应的sass文件

src里面是具体sass样式

001..auth-dialog{
002. 
003.    .auth-profile-wrap{
004.        background:$base-color;
005.        color:$lightest-color;
006.        line-height:24px;
007.        .user-name-text{
008.            font-size: 18px;
009.            font-weight:bold;
010.        }
011.        .user-post-text{
012.            font-size:14px;
013.        }
014.        .auth-profile-img{
015.            @include border-radius($circle-border-radius);
016.        }
017.    }
018.     
019.    .x-form-text-default, .x-placeholder-label-default {
020.        padding: 15px;
021.    }
022. 
023. 
024.    .register-page-back-button,
025.    .register-page-back-button .x-frame-mc{
026.        
027.        border:none;
028.        padding:5px 0 0 0;
029.        .x-btn-inner-default-small{
030.            padding : 0;
031.            height:20px;
032.            color: $base-color;
033.            &:hover{
034.                text-decoration:underline;
035.            }
036.        }
037.        &.x-btn-pressed.x-btn-default-small{
038.            
039.        }
040.    }
041.    .trigger-glyph-noop {
042.        cursor:default;
043.    }
044.    .x-form-trigger{
045.        text-align:right;
046.        width:50px;
047.    }
048.    .password-trigger,
049.    .auth-email-trigger,
050.    .auth-password-trigger,
051.    .auth-envelope-trigger{
052.        &:before{
053.            top: 10px;
054.            left:-18px;
055.            position: relative;
056.            color: $dialog-trigger-color;
057.            font-size: 30px;
058.        }
059. 
060.        &.password-trigger:before,
061.        &.auth-password-trigger:before{
062.            content: "\f023";
063.        }
064.        &.auth-email-trigger:before{
065.            content: "\f007";
066.        }
067.        &.auth-envelope-trigger:before{
068.            content: "\f0e0";
069.        }
070.    }
071.    .seperator{
072.        text-align: center;
073.        color: $create-account-background-color;
074.        font-family: "Open Sans";
075.        display: inline-block;
076.        background: $lightest-color;
077.        position: relative;
078.        z-index: 1;
079.        padding: 0 8px;
080.    }
081.    .link-forgot-password {
082.        line-height:32px;
083.        color: $base-color;
084.        text-decoration:none;
085.        margin-left:5px;
086.        &:hover{
087.            text-decoration:underline;
088.        }
089.    }
090. 
091.    .x-btn{
092.        .x-btn-icon-el{
093.            &:before{
094.                right: 10px;
095.                font-size: 24px;
096.                position: absolute;
097.            }
098.        }
099.    }
100. 
101.    .auth-facebook-button .x-fa{
102.        color: $lightest-color;
103.        font-size: 24px;
104.        top:10px;
105.        right: 13px;
106.    }
107. 
108.    .auth-login-button .x-fa,
109.    .auth-resetpassword-button .x-fa{
110.        font-size: 32px;
111.        right: 11px;
112.        top:10px;
113.        line-height: 16px;
114.    }
115.    .auth-create-account-button .x-fa {
116.        color: $lightest-color;
117.        right: 24px;
118.        top:10px;
119.    }
120. 
121.    .outer-div{
122.        width:100%;
123.        text-align: center;
124.        &:after{
125.            content: " ";
126.            width:100%;
127.            height: 1px;
128.            
129.            position:absolute;
130.            left: 0;
131.            top: 9px;
132.        }
133.    }
134.}

var里面是sass变量

1.$dialog-login-
2.$create-account-
3.$dialog-trigger-color: #e5e5e5;

我们需要某个页面的样式,只需要用同样的规则建立对应的sass配置即可,这里篇幅有限就不细讲了。(注别忘了all.scss,这里面有一些公用sass)

ExtJS 6 如何引入Dashboard模版的更多相关文章

  1. Ext Js 6+ 如何引入dashboard模版

    最近很多人问我在ext js 6+的版本中怎么引入官方的dashboard模版,正好我好久没写博客了,这里我写一篇博客来说明一下. 在这里以ext js 6.2.1版本为例(注:需要安装Sencha ...

  2. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  3. ExtJS 4.2 Date组件扩展:添加清除按钮

    ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...

  4. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  5. ExtJS的MessageBox总结

    自己写了个ExtJS的MsgBox的小模版,以后遇到需要使用提示的地方就拿过来改改,免得每次都重新写. /**MsgBox start**/ Ext.Msg.buttonText.yes = &quo ...

  6. ExtJS 4 类系统

    ExtJS 4的类系统(class system)进行了一次重大重构,ExtJS4的新架构就是基于这套新的类系统构建的,因此有必要先了解以下这个class system这篇文章分为四章 I: &quo ...

  7. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  8. Spring Boot 集成 thymeleaf 模版引擎

    Spring Boot 建议使用 HTML 来完成动态页面.Spring Boot 提供了大量的模版引擎,包括 Thymeleaf.FreeMarker.Velocity等. Spring Boot ...

  9. laravel 模版引擎使用

    laravel 模版引擎以 @标签 开头,以 @end标签 结尾,常用有 foreach foreachelse if for while等 1)foreach 和 foreachelse 差不到,区 ...

随机推荐

  1. Constructor Overloading in Java with examples 构造方法重载 Default constructor 默认构造器 缺省构造器 创建对象 类实例化

    Providing Constructors for Your Classes (The Java™ Tutorials > Learning the Java Language > Cl ...

  2. Django - CBV、FBV

    一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式. 二.CBV CBV(class base view ...

  3. Python网络爬虫学习总结

    1.检查robots.txt 让爬虫了解爬取该网站时存在哪些限制. 最小化爬虫被封禁的可能,而且还能发现和网站结构相关的线索. 2.检查网站地图(robots.txt文件中发现的Sitemap文件) ...

  4. 洛谷 P2602 [ZJOI2010]数字计数

    洛谷 第一次找规律A了一道紫题,写篇博客纪念一下. 这题很明显是数位dp,但是身为蒟蒻我不会呀,于是就像分块打表水过去. 数据范围是\(10^{12}\),我就\(10^6\)一百万一百万的打表. 于 ...

  5. in 和 or 的效率问题

    select * from table where col in (2,3,4,5,6) select * from table where col=2 or col=3 or col=4 or co ...

  6. Python---2. 函数

    转载: Py西游攻关之函数 补充: map函数和reduce函数的区别

  7. 装饰器的修复wraps,偏函数partial 以及chain

    将被装饰的函数的一些属性值赋值给 装饰器函数,最终让属性的显示更符合我们的直觉. from functools import wraps def wapper(func): @wraps(func) ...

  8. validform.js+layer.js 表单验证样式

    $("#formAdd").Validform({ tiptype: function (msg, o, cssctl) { if (o.type == 3) {//失败 laye ...

  9. 搭建Mybatis 出现 Error querying database. Cause: java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for mapper.BatchCustomer.findBatchCustomerOneToOne

    Error querying database. Cause: java.lang.IllegalArgumentException: Mapped Statements collection doe ...

  10. JavaScript实现Map功能

    JavaScript中没有类似Java中的Map集合类的实现,自己做了简单实现,如下: function Map() { this.elements = new Array(); this.size= ...