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）