VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > JQuery >
  • JavaScript教程之初識ExtJS 6----自學筆記(一)

  • 2019-04-27 14:56 來源:未知

魔兽世界大脚插件设置教程: 一、使用環境

魔兽世界wow www.geyjm.icu         這一點寫在前面,是為了方便大家在找資料的時候可以直接定位環境版本。

        ExtJS版本 6.2  中文官方網站提供版本,網站地址//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 //docs.sencha.com/extjs/6.2.0/classic/Ext.html 和官方提供的實例//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的控件進行界面的渲染。

        然后還是引用一下九兄的另外一篇文章//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和菜單樹,如果后續再整理的話,內容肯定會更豐富一些了。

相關教程