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