ExtJS 6 如何引入Dashboard模版

最近很多人问我在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）