ExtJS 6 如何引入Dashboard模版

最近不少人問我在ext js 6+的版本中怎麼引入官方的dashboard模版，正好我很久沒寫博客了，這裏我寫一篇博客來講明一下。
css

在這裏以ext js 6.2.1版本爲例（注：須要安裝Sencha Cmd，以及下載對應的sdk）node

1.建立空白項目

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

D:\ASPX\ext-6.2.1 是指sdk目錄sass

generate app --classic app 是建立pc端應用，這個應用的包名是app服務器

D:\ASPX\Test 就是所建立項目的目錄了app

運行一下項目，效果是這樣的，這並非咱們想要的模版
編輯器

2.移植模版

a.打開你所建立的項目，打開app目錄

刪掉裏面全部的文件ide

b.找到sdk所在目錄，依次打開templates->admin-dashboard->app目錄
工具

將app目錄裏面的文件所有複製並替換到你建立項目的app目錄中，在這裏是指D:\ASPX\Test\appoop

返回到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）