一、使用環境

這一點寫在前面，是為了方便大家在找資料的時候可以直接定位環境版本。

ExtJS版本 6.2 中文官方網站提供版本，網站地址http://extjs.org.cn/node/793

開發環境 .net 隨便哪個版本

使用工具visual studio 2015

二、自學初衷

在這裏要說明一下本人真的是初學Ext 6.x（未入門），雖然5年前用過Ext 3.x，但也只是覺得Ext在界面優化方面做的很好，對於Ext和Sencha來說真的是知之甚少，所以如果有什麽說的不對的，希望大拿們幫我指正。本次因為是重寫了一個公司的爛尾項目，不能用公司的UI做界面，所以才想到了用Ext來做界面。而且在看了Ext 6.x的界面之後，確實是心動了。

在學習Ext 6.x的時候並不是沒在網上找資料，CSDN上的資源都需要積分，但由於好幾年沒有使用CSDN，以前的積分都過期了，所以直接就忽視了CSDN。在cnblogs上也有很多資料，但是也只能學習一個大概，整體思路不太能碰撞在一起，所以一邊看也要一邊結合Ext 6.2 api http://docs.sencha.com/extjs/6.2.0/classic/Ext.html 和官方提供的實例http://examples.sencha.com/extjs/6.5.3/examples才能勉強看懂一些。

為什麽選擇Ext 6.2這個版本？在本次結合Ext做項目之前，官方的版本已經到了6.5.3，但是從官網申請下載最新版本的時候，遲遲沒有收到郵件。中文官網只提供6.2版本的下載，所以只能用6.2版本作為熟悉和練手用了。不過還是感覺6.5.3在界面優化上又更漂亮一些，以後如果有機會還是使用6.5.3吧。

寫這篇自學筆記的初衷，其實最近學的比較累，過去三天的時間幾乎都是投入在其中，如果不能把自己學的整理一下的話，感覺有點對不起自己，當然也是為了自己以後查看的時候，不用再繞彎路。那麽下面直接進入正題。在本次學習筆記中，以模仿官方提供的template中的admin-dashboard實例為主線。

三、ExtJS 6.x 基礎說明

這一部分，其實不能完全叫基礎說明，本人是沒有系統的進行過學習的，之前也沒有接觸過mvc和mvvm的項目，所以只能是自己學習的時候重點了解了哪些，在這裏記錄一下。說的不對的請指正。

在這裏要引用一下九兄的文章https://www.cnblogs.com/humanxiaoman/p/5023256.html，這裏介紹了ExtJS 6的核心js和樣式。當然這篇文章裏也說明了ExtJS 6也可以和ExtJS 3.x一樣，直接調用ExtJS的控件進行界面的渲染。

然後還是引用一下九兄的另外一篇文章http://www.cnblogs.com/humanxiaoman/p/5024048.html，這裏主要介紹了我們這次的主角ExtJS 6.x的開發模式——MVC。

在MVC開發模式下，主要學習的是View（視圖，渲染界面）、Controller（控制器，編寫操作邏輯）、Model（數據模型）這三個內容。這三部分內容具體怎麽運作，之後會在我完全模仿官方例子的時候再做說明。

這裏先展示一下我的項目的結構目錄樹，其中：

app —— 項目目錄，存放整個項目需要用到的前、後臺代碼

controller —— 控制器目錄，存放所有的控制器

handler —— 一般處理文件目錄，用來處理後臺代碼邏輯

model —— 數據模型目錄，用來存放所有的數據模型

store —— 數據源目錄，在之前用ExtJS 3.x的時候，我們就知道ExtJS中各種容器控件，綁定的數據源都為store類型，store還有一個好處就是可以異步獲取數據，非常方便。這裏用來存放所有的數據源

view —— 視圖界面目錄，用來渲染界面展示效果

application.js —— 程序基類的定義

CSS —— 存放所有樣式文件

JS —— 存放ExtJS的基類以及派生類

app.js —— 程序的主入口，這個入口之後會重點說明，因為網上有的說要直接在頁面上引用，而官網的例子卻沒有這麽做，所以之後會有一個說明。

bootstrap.js —— 官方的例子中調用的一個起始腳本，主要工作是判斷當前程序是在電腦還是手機端使用，用來加載不同的*.json文件（其實主要就是為了區分調用classic.json和modern.json）

classic.json —— 電腦端需要調用的json配置，因為我們只在電腦端用，所以只在項目中做這一個json文件。這裏其實就是把一個json串以文件的形式進行了存儲，需要註意的是，在json文件中可以把每一塊內容都換行，美化之後方便我們閱讀和修改，但美化之後不可以註釋，json串最後還是返回一行內容，所以註釋符號會影響後面所有的內容，如果有不需要的json內容，直接刪掉就好。

index.html —— 承載腳本也樣式的html頁面。為什麽不用.net的aspx？因為這個頁面不需要寫後臺服務器端的邏輯。

web.config —— asp.net的項目，你們都懂得。

另外，這裏還要說明一下。在查看官方的api的時候，會有classic和modern之分，兩者呈現的界面效果也是不一樣的，這一點6.5.3版本更明顯。ExtJS不知從哪個版本開始，就可以做移動端app軟件了，所以classic就是經典的電腦端的，而modern則是手機移動端的。之前在說bootstrap.js的時候提到他可以區分classic和modern，其實是為了可以讓一個程序兼容電腦和手機。

這裏還要再提幾個常用函數：

Ext.application({config}) —— 看很多資源上介紹他是程序的主入口。個人理解，他設定了你此次項目的命名空間，方便mvc模式運轉，可以在這裏設定起始加載頁面（這個頁面指view裏的腳本），並加載一些其他需要用到的js腳本代碼。在查看官方的實例中時，發現第一個被調用的其實是bootstrap.js中的Ext.Microloader.run();，不過之前也說過了，bootstrap.js主要是為了判斷需要加載哪個json文件，並在在裏面寫了一些處理json配置項的邏輯。

Ext.define(‘命名空間.文件夾.文件名’,{config}) —— 定義一個類。我們後續用到的所有的view、controller、model、store都和他脫不開關系。

extend —— 繼承一個類。一般是用來繼承ExtJS的基類的。個人理解這樣可以更方便ExtJS理解我們到底定義了一個什麽東西。

requires —— 加載一些類。個人理解他就是為了我們可以調用到某一個類，然後需要在這裏加載。

四、未完待續。。

本來打算是要整理的內容還要比這些多一點，但是今天整理的有點晚了，其他的稍後找個時間再進行整理吧，不過最近項目工期比較緊，下次看來要抽一個時間比較多的空了。這裏先放一個我模仿官方實例做的一個框架的界面圖，只有首頁的toolbar和菜單樹，如果後續再整理的話，內容肯定會更豐富一些了。

初識ExtJS 6----自學筆記（一）