<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ## 開發工具(IDE集成開發平臺) IDE開發平臺可以加快開發的速度,可以選用Eclipse 或者Visual Studio Code,Sencha官方也提供了這兩個IDE的插件,但是這個插件時收費的。對于初學者,可以不使用插件。這里使用Visual Studio Code,下載地址:[https://code.visualstudio.com/](https://code.visualstudio.com/)。 也可到如下地址下載: 鏈接:https://pan.baidu.com/s/1hjrxNp9bybqKgsNkwLdENA 提取碼:eype ## Visual Studio Code安裝 雙擊安裝文件 VSCodeUserSetup-x64-1.42.0.exe 安裝。默認會按照到`C:\Program Files`目錄。 ## 在Visual Code Code中打開項目 啟動Visual Studio Code, 選擇File|Open Folder ![](https://img.kancloud.cn/78/b3/78b3a96984f5a6c36be25b9b4b8a3757_540x408.png) 選擇項目路徑 ![](https://img.kancloud.cn/4a/ca/4aca1c0e412fa9acf75f2571c5e50bd7_832x185.png) 打開后的項目結構如下: ![](https://img.kancloud.cn/ea/87/ea877e377f2968620795438ad717d671_1055x616.png) Ext JS支持兩種開發模式: * Classic: 經典模式,桌面端應用 * Modern: 現代模式, 移動端應用 應該該示例項目創建的是包含和經典和現代模式的應用,所以項目的子目錄包含classic和modern。 雖然經典和現代模式因為不同的終端頁面顯示的處理和API不同,但是對于數據已經模型相關的定義是沒有差別的,所以這些部分是可以合并在一起的。 對項目的各子目錄說明如下: * app,包括模式、數據倉庫和控制器類的定義。 * build:編譯后的目錄 * classic:經典模式的視圖類 * ext: Ext JS的基本類或原生類。(Ext JS SDK) * modern: 現代模式的視圖類 * resource:資源文件, 比如圖片文件等。 ## 在Visual Code 中啟動項目 在Visual Studio Code中,可以直接打開命令終端,執行啟動應用的命令。步驟是: 1. 在左邊的文件導航區塊右鍵單擊 2. 選擇“Open in Terminal”, 則在右邊的下方會切換到 "TERMINAL"的標簽頁,該標簽頁就相當于一個命令窗口。 3. 該命令窗口的默認路徑就是項目的根路徑(注意:不要選中任何目錄,否則會進入選中的目錄的路徑),輸入 `sencha app watch` ![](https://img.kancloud.cn/d0/bf/d0bf239e6ea4c85744d977a69df9b7a6_1149x729.png) ## 第一個改動: 從修改產生的代碼開始 應用啟動后,在瀏覽器端輸入`http://localhost:1841/`, 瀏覽器顯示的效果如圖: ![](https://img.kancloud.cn/8d/c4/8dc4f74b9c9d087315ee60f8cbf48bea_838x562.png) 上圖中導航欄條目旁邊是一個長方形的方塊,其實這是一個圖標。在Sencha Cmd 6之前產生的項目基本上是正常的。 但是這個問題只出現在經典模式(classic)中, 在現代模式(modern)是正常的, 在瀏覽器中輸入:`http://localhost:1841/?modern` 訪問現代模式的效果,頁面如下: ![](https://img.kancloud.cn/45/22/45227a8ac0a02a7a7eb5cde35c3ae2df_1007x862.png) 使用 Cmd產生的項目的classic模式的主頁面的JS源文件位于 `classic\src\view\main\Main.js`,與modern模式對應的文件( `modern\src\view\main\Main.js`)對比后會發現,導航欄條目的 iconCls略微有點不一樣, 正常的顯示包含`x-fa`。 ![](https://img.kancloud.cn/34/99/3499c9853062ef084324805621c96852_1185x661.png) iconCls是設定條目的圖標樣式,使用的是Font Awesome的字體圖標庫。 看起來classic中少了`x-fa`前綴,雙擊打開`classic\src\view\main\Main.js`,在iconCls中添加`x-fa`。 修改并保存的時候, 會發現命令控制臺會即時的輸出日志: ![](https://img.kancloud.cn/d6/f7/d6f78ebac5f4adccb6ee73413b3e26f1_1276x397.png) 這是因為,** Cmd會即時偵聽到文件的變化, 對于文件的修改甚至大部分的新增代碼文件都可以即時偵聽到, 不需要重啟服務,只需要在瀏覽器端刷新頁面就可以看到修改后的效果**,這里刷新頁面,顯示效果如下: ![](https://img.kancloud.cn/e3/23/e323116f0ffc25e9e69be85d9a3c070c_1170x541.png) ## 開發嘗鮮:自定義的Grid(網格) 接下來定義顯示一個三國名人的網格(Grid),點擊左邊的“三國名人錄”,在右邊顯示對應的表格,最終的效果如下: ![](https://img.kancloud.cn/b4/25/b425c94cbbf26204552a4709873eb31c_857x647.png) 開發步驟: 1. 定義模型類 Ext7DemoApp.model.User 2. 定義User類型的數據倉庫:Ext7DemoApp.store.User 3. 定義Grid的組件Ext7DemoApp.view.main.UserGrid 4. 在左邊導航欄增加一條記錄,點擊后顯示步驟3的組件。 目錄結構代碼的增加和修改如下圖: ![](https://img.kancloud.cn/45/7c/457cf742cd575333d4912deac04f5a3f_791x730.png) #### 模型類 Ext7DemoApp.model.User Model , 模型,相當于后端開發的實體類,源碼文件的全路徑文件名是: app/model/User.js。該實體類包括三個屬性: id 、name(名字)以及kingdom(所屬的諸侯國),代碼如下: ``` Ext.define('Ext7DemoApp.model.User', { extend: 'Ext7DemoApp.model.Base', fields: [ 'id', 'name', 'kingdom' ] }); ``` * extend: 繼承共同的父類 * fields: 模型類的字段 #### 數據倉庫類 Ext7DemoApp.store.User Store, 數據倉庫,包含了某種類型對象的集合。Store中數據的來源可以通過服務地址從后端獲取,也可以使用本地內存數據, 簡單起見,這是使用memory類型的數據,定義如下: ``` Ext.define('Ext7DemoApp.store.User', { extend: 'Ext.data.Store', alias: 'store.user', model: 'Ext7DemoApp.model.User', data: { items: [ { id: 1, name: '劉備', kingdom: "蜀國" }, { id: 2, name: '曹操', kingdom: "魏國" }, { id: 3, name: '孫權', kingdom: "吳國" }, ] }, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); ``` * extend: 繼承的父類Ext.data.Store * alias,別名,這里配置為`store.user`后, 在組件中就可以使用 store后面的`user`來使用了。 * data: 包含的數據集合 * proxy, 數據獲取的方式以及解析器的配置。這里讀取內存數據(memory,也就是data配置的數據),reader配置中, type是數據的類型, `json`代表JSON對象格式,rootProperty是使用對象中的哪一個鍵的值作為數據源。 完成以上代碼,在瀏覽器中刷新就可以看到效果了。 示例項目路徑: [https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app](https://github.com/osxm/demoworkspace/tree/master/extjs/ext7-demo-app) ***** *****
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看