Ext Js 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，因此咱們須要對代碼進行一些修改纔可使用

 1 Ext.define('app.Application', {
 2     extend: 'Ext.app.Application',
 3     name: 'app',
 4     stores: [
 5         'NavigationTree'
 6     ],
 7     defaultToken: 'dashboard',
 8     mainView: 'app.view.main.Main',
 9     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配置，修改成以下配置

    "requires": [
        "charts",
        "font-awesome",
        "ux"
    ]

 

3.編譯

打開cmd，進入你所建立的項目目錄中，這裏是指D:\ASPX\Test目錄，運行sencha app build命令打包

運行一下項目，這就是咱們想要的效果（注：我沒有放到服務器中運行，因此看不到具體數據）

 

4.自定義模版

咱們看一下項目結構，簡單介紹一下各個目錄的做用

app目錄---------------項目文件目錄

　　data目錄------------數據源目錄

     model目錄-----------模型目錄

     proxy目錄------------自定義代理目錄

     store目錄-------------數據倉庫目錄

     view目錄-------------視圖目錄

overrides目錄---------重寫類目錄

resources目錄--------資源文件目錄

sass目錄--------------sass樣式目錄

app.js----------------項目入口文件

app.json-------------項目配置文件

這裏咱們重點關注app下的view目錄與sass目錄，目錄結構對好比下

 

以Dialog視圖爲例，在sass目中下src，var目錄下都生成了對應的sass文件

src裏面是具體sass樣式

  1 .auth-dialog{
  2 
  3     .auth-profile-wrap{
  4         background:$base-color;
  5         color:$lightest-color;
  6         line-height:24px;
  7         .user-name-text{
  8             font-size: 18px;
  9             font-weight:bold;
 10         }
 11         .user-post-text{
 12             font-size:14px;
 13         }
 14         .auth-profile-img{
 15             @include border-radius($circle-border-radius);
 16         }
 17     }
 18     
 19     .x-form-text-default, .x-placeholder-label-default {
 20         padding: 15px;
 21     }
 22 
 23 
 24     .register-page-back-button,
 25     .register-page-back-button .x-frame-mc{
 26         background-color: $lightest-color;
 27         border:none;
 28         padding:5px 0 0 0;
 29         .x-btn-inner-default-small{
 30             padding : 0;
 31             height:20px;
 32             color: $base-color;
 33             &:hover{
 34                 text-decoration:underline;
 35             }
 36         }
 37         &.x-btn-pressed.x-btn-default-small{
 38             background-color: transparent;
 39         }
 40     }
 41     .trigger-glyph-noop {
 42         cursor:default;
 43     }
 44     .x-form-trigger{
 45         text-align:right;
 46         width:50px;
 47     }
 48     .password-trigger,
 49     .auth-email-trigger,
 50     .auth-password-trigger,
 51     .auth-envelope-trigger{
 52         &:before{
 53             top: 10px;
 54             left:-18px;
 55             position: relative;
 56             color: $dialog-trigger-color;
 57             font-size: 30px;
 58         }
 59 
 60         &.password-trigger:before,
 61         &.auth-password-trigger:before{
 62             content: "\f023";
 63         }
 64         &.auth-email-trigger:before{
 65             content: "\f007";
 66         }
 67         &.auth-envelope-trigger:before{
 68             content: "\f0e0";
 69         }
 70     }
 71     .seperator{
 72         text-align: center;
 73         color: $create-account-background-color;
 74         font-family: "Open Sans";
 75         display: inline-block;
 76         background: $lightest-color;
 77         position: relative;
 78         z-index: 1;
 79         padding: 0 8px;
 80     }
 81     .link-forgot-password {
 82         line-height:32px;
 83         color: $base-color;
 84         text-decoration:none;
 85         margin-left:5px;
 86         &:hover{
 87             text-decoration:underline;
 88         }
 89     }
 90 
 91     .x-btn{
 92         .x-btn-icon-el{
 93             &:before{
 94                 right: 10px;
 95                 font-size: 24px;
 96                 position: absolute;
 97             }
 98         }
 99     }
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             background-color: $blank-page-color;
129             position:absolute;
130             left: 0;
131             top: 9px;
132         }
133     }
134 }

var裏面是sass變量

1 $dialog-login-background-color: #83c748; 2 $create-account-background-color: #a1a1a2; 3 $dialog-trigger-color: #e5e5e5;

咱們須要某個頁面的樣式，只須要用一樣的規則創建對應的sass配置便可，這裏篇幅有限就不細講了。（注別忘了all.scss，這裏面有一些公用sass）