[020]Sencha Ext JS 6.0使用教程2

本節主要以典型例子介紹如何用Sencha Ext JS6.0進行專案開發
入門階段總是比較難的,掌握了基本操作步驟,使用方法,架構思維,開發起來還是滿順利,開心的,自己又能掌握一門新技術,又能進步,主要還是學習能力上的提升,慢慢掌握如何從零開始接觸一門新東西、新技術。IT方面的技術更新還是滿快的,必須跟上時代的步伐,還能不被大浪淹沒。好了廢話不多說,對於程式設計師程式碼還是最有說服力。

1,基本命令:

生產新專案:sencha –sdk {sdk的路徑名} generate app {應用名稱} {應用路徑(如果是當前路徑就是”.”)}
重新載入專案:sencha app build
重新整理專案:sencha app refresh
檢視專案:sencha app watch

2,檔案目錄結構

官方對於應用程式的目錄結構有下面一段描述:

File Structure
Ext JS applications follow a unified directory structure that is the same for every app. In our recommended layout, all Store, Model, ViewModel, and ViewController classes are placed in the app folder (with Models placed in the model folder, Stores in store, and ViewModels/Controllers in view). Best practice will be to logically group ViewControllers andViewModels together in sub-folders within the app/view/ folder using a similar naming structure that you’ll use for the views themselves (see the “app/view/main/” and “classic/src/view/main/” folders below).

意思就是說:EXT JS的應用程式都公用相同的目錄結構,所有的Store, Model, ViewModel, 和 ViewController類都放在專案的app資料夾下,Models類放在model 資料夾,Stores放在store資料夾下。

分層的目錄結構如下:

這裡寫圖片描述

新建專案檢視:

目錄結構:

這裡寫圖片描述

3,新專案執行

新專案目錄下執行sencha app watch命令即可檢視基本專案框架檢視:下面檢視稍微改變了一些頁面樣式:

這裡寫圖片描述

4,元件新增

下面就是新增我們自己想要的元件元素,開始階段千萬不要想著自己去寫介面,尤其js玩的比較好的朋友們,因為Sencha官方都把常用的示例程式碼開源,供大家使用,而且也是最正確的使用。以chart為例:
官方程式碼示例:
http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/?charts=true#line-marked

這裡寫圖片描述

右上角列出了三個程式碼導航,分別為View ,contoller,store,分別代表三部分程式碼,從字面意思上也可以想到這三部分程式碼分別代表什麼意思,放在專案的什麼位置,已經在第二部分說明了專案的檔案結構,將這部分程式碼分別複製,放在專案的對應資料夾下,供主程式呼叫。

程式修改:
View下的程式碼:修改類名,請求的資料,MyApp.store.Chart1為store下的程式碼類名,三個類的名字最好都改成extjs的命名規範格式,這樣程式好維護。

這裡寫圖片描述

主Main.js程式碼修改

這裡寫圖片描述

這裡寫圖片描述

這樣chart的資源就載入進主Main了
執行sencha app build, sencha app refresh, sencha app watch檢視執行效果
這是會發現什麼都顯示不出來,按F12,重新整理頁面發現報錯了

這裡寫圖片描述

經分析查詢會發現是view的chart程式碼裡引用certesian,而開始預設生成的專案裡是沒有這個資源的,所以我們要自己新增

這裡寫圖片描述

在專案的根目錄下有個app.json檔案,這裡載入需要的資源,需要在requires裡引入charts

這裡寫圖片描述

再次執行sencha app build, sencha app refresh, sencha app watch檢視執行效果,千辛萬苦我們想要的圖終於出現了,至此chart元件就成功新增了,其它元件也都是類似的新增。

新增導航與折線圖案例:

這裡寫圖片描述

通過這個專案,我又學到了很多東西,完成這部分工作一共花費了2天時間,從開始對extjs6.0與sencha大白,到能專案的具體部署實施,從sencha的官方英文文件,到程式碼的具體實施,都是一個學習的過程。遇到問題不能慌張,認真思考,問題總會解決的。