1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

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

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

        一、使用環境

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

                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和菜單樹,如果后續再整理的話,內容肯定會更豐富一些了。

        相關教程
        免费看成年人视频大全_免费看成年人视频在线观看