ExtJS6.0開發(fā)培訓

1、一、 EXT5ext5的主題是用SASS（點擊進入）和Compass（點擊進入）編寫的。在ext5中，僅僅通過更改SASS的變量值，就可以將幾乎所有的組件樣式定制了，包括顏色，字體，邊框，背景。本文介紹了如何創(chuàng)建一個在多應用中可分享的定制化主題。1. 環(huán)境要求Sencha Cmd 5這是一個命令行工具，用于部署Ext JS應用，創(chuàng)建一個Ext JS 5主題，你必須擁有Sencha Cmd 5 或更高版本注意：Sencha Cmd 5 已經(jīng)預安裝了SASS和Compass，如果你的電腦已經(jīng)安裝了，請卸載掉自己的。Ruby安裝ruby環(huán)境（點擊進入）用1.9.3版本Ext JS如果你本地有Ext

2、JS SDK，解壓后在本地路徑下執(zhí)行Cmd命令就行。不過我們已經(jīng)不用下載Ext JS 了，你可以用“-ext”命令來自動下載最新版的Ext JS 5！我們這次就用這個命令來做。2. 創(chuàng)建自定義主題如上所述 你需要安裝ruby，cmd工具，就可以開始制作主題了創(chuàng)建一個工作空間第一步是用Sencha Cmd創(chuàng)建一個你自己的工作空間rubyview plaincopyprint?1. cd/dE:ext2. senchagenerateworkspace-extmy-workspace如果你想使用一個下載好的SDK或本地的一個SDK副本，在命令前面加上你解壓的Ext JS SDK的路徑就可以了rub

3、yview plaincopyprint?1. sencha-sdk/sencha-5.0.0generateworkspacemy-workspace1.sencha -sdk C:UserszjDesktopext-5.1.0-gplext-5.1.0 generate workspace D:EXTSenchaCmd5SenchaCmdworkZJ生成的工作空間將利用腳手架生成一個Sencha目錄，讓我們進去看看rubyview plaincopyprint?1. cdmy-workspace如圖：“ext” -包含了Ext JS SDK“packages” - EXT JS語言環(huán)境和主

4、題包生成一個App來測試主題我們來生成一個App，在這個基礎上來制作主題，在“my-workspace”路徑下，用下面的命令來生成一個Ext JS應用的骨架：rubyview plaincopyprint?1. sencha-sdkextgenerateappThemeDemoApptheme-demo-app1.sencha -sdk ext generate app ZJEXT ZJEXT現(xiàn)在，我們生成了一個名字為ThemeDemoApp的應用，路徑（也就是文件夾）為theme-demo-app。這個應用將用ext文件夾下的js文件作為引用源?，F(xiàn)在的結構為theme-demo-app里面的

5、結構為進入后 用下面的命令啟動app服務器 用網(wǎng)頁查看rubyview plaincopyprint?1. cdtheme-demo-app2. senchaappwatch這里有兩種方式查看你的app：1.開發(fā)模式打開my-workspace/theme-demo-app/index.html方便調(diào)試，代碼未壓縮，我們的教程用的是這個模式。2.生產(chǎn)模式運行命令rubyview plaincopyprint?1. senchaappbuild構建后，你可以用瀏覽器在下面的路徑找到你的應用my-workspace/build/production/ThemeDemoApp/index.html使

6、用壓縮后的源文件，性能更好生成自定義主題包在theme-demo-app文件夾下，運行rubyview plaincopyprint?1. senchageneratethememy-custom-theme它告訴senchacmd生成一個名字為my-custom-theme的主題包就在my-workspacepackages路徑下lpackage.json -包屬性文件，它告訴Sencha Cmd這個包的一些信息，如 包名，版本，依賴（本包對其他包的依賴）等lsass/-所有的主題SASS文件，里面分三部分：nsass/etc/ -額外的工具函數(shù)或混入mixinsnsass/src/ - S

7、ASS規(guī)則和調(diào)用定義在“sass/var/”中的變量的UI mixinnsass/var/- SASS變量sass/var/和sass/src是結構化的，也就是說，是按照你編寫樣式組件的類路徑方式來匹配的。舉個例子，更改Ext.panel.Panel外觀的變量應該放在一個文件名為sass/var/panel/Panel.scss的文件中l(wèi)resources/-圖片和其它靜態(tài)資源loverrides/-包含任意修改主題組件類所需覆寫的js主題繼承機制每一個主題包都繼承自基本主題包，你創(chuàng)建自己的主題首先要指出你繼承自哪個主題，你能從my-workspaceextpackages路徑下看到所有的主題

8、包ext-theme-baseext-theme-neutralext-theme-neptuneext-theme-crisp-touchext-theme-crispext-theme-crisp-touchext-theme-classicext-theme-grayext-theme-aria我們的自定義主題應該繼承哪一個作為開始呢？我們的建議是使用ext-theme-neptune或ext-theme-classic作為起點，因為這些主題包含所有創(chuàng)建一個有吸引力的主題的必要代碼。Neutral主題是一個比較抽象的主題，不容易直接繼承。覆寫一個Neutral主題可能需要你數(shù)個小時的工作

9、，更改數(shù)百個變量值，而用一個neptune或classic主題你可能只需要花幾分鐘更改數(shù)個變量。當然，gray或aria主題也是相當不錯的選擇。這個教程中，我們創(chuàng)建一個繼承Neptune主題的自定義主題。打開“packages/my-custom-theme/package.json”文件，找到rubyview plaincopyprint?1. extend:ext-theme-classic更改為rubyview plaincopyprint?1. extend:ext-theme-neptune刷新app，這樣保證正確的主題js文件包含到bootstrap.js中了，運行刷新命令ruby

10、view plaincopyprint?1. senchaapprefresh好了 現(xiàn)在你的主題變成了Neptune主題了，你可以在my-workspaceextpackagesext-theme-neptune中進行修改樣式，編譯后可看主題（編譯在后面講到）運用自己的主題首先講解一下幾個重要的命令行sencha app watch在app應用路徑下執(zhí)行。用于啟動服務器，一旦啟動，它將監(jiān)控你的應用更改并自動構建和刷新你的應用。Sencha app build在app應用路徑下執(zhí)行。更改應用的某些參數(shù)后，需要重新構建一下來把參數(shù)導入Sencha app refresh在app應用路徑下執(zhí)行。更改

11、內(nèi)容寫入bootstrap.js中，咱們這里是更改主題配參后運行一下。Sencha package build在主題包路徑下執(zhí)行。更改主題包某些參數(shù)后，需要重新構建好，首先讓我們先把默認主題更改為我們的自建主題路徑：theme-demo-app/app.jsonrubyview plaincopyprint?1. /*2. *Thenameofthethemeforthisapplication.3. */4. theme:ext-theme-neptune,更改為rubyview plaincopyprint?1. /*2. *Thenameofthethemeforthisapplicat

12、ion.3. */4. theme:my-custom-theme,我們把neptune主題包更改為了我們自定義的主題包，ext會自己去my-workspace下的package里面尋找。include extjs-panel-ui( $ui-label: jzpm,$ui-border-color : #32323A$ui-border-width : 0 $ui-border-color : #32323A$ui-header-color : #32323A$ui-header-font-size : #FFFFFF$ui-header-font-weight : #32323A$ui-h

13、eader-line-height : #32323A$ui-header-background-color : #32323A$ui-body-background-color : #32323A);配置全局主題變量讓我們來修改一個變量-base color。在my-custom-theme/sass/var/中創(chuàng)建一個文件Component.scss，增加如下代碼rubyview plaincopyprint?3. $base-color:#317040!default;后面加！default提高其優(yōu)先級，因為Sencha Cmd變量文件讀取是“反向”的，先讀取衍生主題，最后是base主題

14、。更多的！default用法參見Variable Defaults完整的ext js全局SASS變量列表參見Global_CSS.構建包現(xiàn)在你已經(jīng)修改了自有主題的base color，你需要為你的主題構建一個包含所有樣式規(guī)則的升級版本css文件。到路徑packages/my-custom-theme/下，運行rubyview plaincopyprint?1. senchapackagebuild構建包將創(chuàng)建一個“build”文件夾，在my-custom-theme/build/resources中，你將找到一個my-custom-theme-all.css，這個文件包含你的主題的所有組件的樣

15、式規(guī)則。你可以直接在你的應用中鏈接它，但是這樣做并不推薦，因為“all”文件包含了每一個ext組件的所有樣式，而許多app應用僅僅用了組件庫中的子集，如果你想這么做，首先請先在你的應用中更改參數(shù)，指定好應用具體使用哪個主題，再開始構建，這樣sencha cmd會自動過濾掉未使用的css樣式規(guī)則。接著我們來構建一下my-custom-theme，因為剛才我們更改了theme-demo-app/app.json文件，并沒有構建到theme-demo-app路徑下，運行rubyview plaincopyprint?1. senchaappbuild啟動sencha app watch，刷新瀏覽器t

16、heme-demo-app/index.html。你應該看到了更改的樣子了。背景變綠了組件變量更改每一個Ext JS組件都有一系列的主題全局變量可供你修改。讓我們來改變panel headers的font-family。創(chuàng)建文件packages/my-custom-theme/sass/var/panel/Panel.scss，增加如下代碼rubyview plaincopyprint?1. $panel-header-font-family:TimesNewRoman!default;運行rubyview plaincopyprint?1. senchaappbuild可以看到字體變化了注：

17、其實這里我測試后發(fā)現(xiàn)這里字體是不會發(fā)生變化的，panel只有加了frame后 字體才會發(fā)生變化創(chuàng)建自定義組件UIExt中 每個組件都擁有自己的UI設置參數(shù)，缺省下都是default，這個屬性可以給予單獨實體組件擁有自己的UI配參，可以讓你在同一類型組件下給予不同的樣式，比如，panel的“default UI”是黑藍色的header，但它的“l(fā)ight UI”中，header是亮藍色的，button也用UI來制作不同于普通按鈕的工具條按鈕。Neutral主題為各種組件提供了很多SASS mixins混入，你可以用這些mixins來生成新的UI，這可以從API中找到它們，如，Ext.panel.

18、Panel中，找到“CSS Mixins”部分，看看mixins需要哪些參數(shù)，現(xiàn)在，讓我們來用mixins來創(chuàng)建一個Panel UI，創(chuàng)建一個文件packages/my-custom-theme/sass/src/panel/Panel.scss，寫入如下代碼rubyview plaincopyprint?1. includeextjs-panel-ui(2. $ui-label:highlight-framed,3. $ui-header-background-color:red,4. $ui-border-color:red,5. $ui-header-border-color:red,6

19、. $ui-body-border-color:red,7. $ui-border-width:5px,8. $ui-border-radius:5px9. );這段代碼創(chuàng)建了一個新Panel UI，名稱為highlight-framed，為了在項目中使用它，把Panel中的ui屬性設置為highlight（“-framed”這個后綴在你把frame屬性設置為true時會自動添加上）打開theme-demo-app/app/view/Main.js，替換一下代碼：rubyview plaincopyprint?1. items:2. /customhighlightUI3. xtype:pan

20、el,4. ui:highlight,5. frame:true,/Makesuretoaddthisconfigtoseetheframehighlightchanges6. bind:7. title:name8. ,9. region:west,10. html:Thisareaisusedfornavigation,forexample,usingatreecomponent.,11. width:250,12. split:true,13. tbar:14. text:Button,15. handler:onClickButton16. 17. ,18. region:center

21、,19. xtype:tabpanel,20. items:21. title:Tab1,22. html:Contentappropriateforthecurrentnavigation.23. 24. 效果如下：雖然UI mixin是一個方便的方式為一個組件配置多個表象,他們不應該被過度使用。每個調(diào)用UI mixin生成額外的CSS規(guī)則。隨意調(diào)用UI mixin可能產(chǎn)生過大的CSS文件。 另一個重要的一點要記住當調(diào)用UI mixin時，是通過其命名參數(shù)調(diào)用mixin,而不是參數(shù)值的有序列表。盡管SASS支持兩種形式，但是最好使用這種形式:rubyview plaincopyprint?1

22、. includeextjs-component-ui(2. $ui-foo:foo,3. $ui-bar:bar4. );而不是rubyview plaincopyprint?1. includeextjs-component-ui(foo,bar);修改圖片資源所有的圖片資源缺省下都繼承自父主題，我們可以通過覆寫方式來實現(xiàn)，把想覆寫的圖片放在my-custom-theme/resources/images/中，給它們父主題中同樣的名字即可。如，讓我們改變MessageBox組件的info icon，把下面的圖片保存起來packages/my-custom-theme/resources/i

23、mages/shared/icon-info.png在theme-demo-app/app/view/Main.js中寫代碼把其顯示出來rubyview plaincopyprint?1. .2. tbar:3. text:Button,4. handler:onClickButton5. ,6. items:7. xtype:button,8. text:ShowMessage,9. handler:function()10. Ext.Msg.show(11. title:Info,12. msg:MessageBoxwithcustomicon,13. buttons:Ext.Messag

24、eBox.OK,14. icon:Ext.MessageBox.INFO15. );16. 17. 18. .運行rubyview plaincopyprint?1. senchaappbuild看效果主題Js覆寫覆寫js的屬性十分簡單，讓我們試著把Panels中的屬性titleAlign更改一下。創(chuàng)建packages/my-custom-theme/overrides/panel/Panel.js，寫如下代碼rubyview plaincopyprint?1. Ext.define(MyCustomTheme.panel.Panel,2. override:Ext.panel.Panel,3

25、. titleAlign:center4. );在packages/my-custom-theme/路徑下，運行rubyview plaincopyprint?1. senchapackagebuild這是為了讓packages/my-custom-theme/build/my-custom-theme.js包含最新的覆寫。在theme-demo-app路徑下，運行rubyview plaincopyprint?1. senchaapprefresh這是為了覆寫主題被包含進正在運行的項目?，F(xiàn)在在theme-demo-app路徑下，重新構建項目rubyview plaincopyprint?1.

26、 senchaappbuild可以起服務看效果了 panel headers文字居中了SASS命名空間如上所述,Sencha Cmd查找文件“sass / var”和“sass / src”相匹配的JavaScript類。對于主題，在默認情況下,Ext名稱空間被認為是頂級名稱空間,所以主題的“sass/src/panel/Panel.scss”對應于Ext.panel.Panel對于Ext以外的主題名稱空間，你必須改變在.sencha/package/app.json中的名為space的配置屬性為了統(tǒng)一配置 你需要這樣寫rubyview plaincopypr

27、int?1. /*2. *Sassconfigurationproperties.3. */4. sass:5. /*6. *Therootnamespacetousewhenmapping*.scssfilestoclassesinthe7. *sass/srcandsass/vardirectories.Forexample,MyApp.view.Foowould8. *maptosass/src/view/Foo.scss.IfwechangedthistoMyApp.viewthen9. *itwouldmaptosass/src/Foo.scss.Tostyleclassesouts

28、idetheapps10. *rootnamespace,changethisto.Doingsowouldchangethemappingof11. *MyApp.view.Footosass/src/MyApp/view/Foo.scss.12. */13. /*14. *MyApp.view.Foo對應sass/src/view/Foo.scss，如果我們更改為MyApp.view15. *那么將對應sass/src/Foo.scss，如果設置為，MyApp.view.Foo16. *將對應sass/src/MyApp/view/Foo.scss17. */18. 19. namespa

29、ce:20. ,在這個設定中，Ext.panel.Panel對應的就是sass/src/Ext/panel/Panel.scss了添加自定義的SASS所有的自定義SASS都放在sass/etc，你可以隨意組織里面的代碼，但是注意sencha cmd只構建sass/etc/all.scss，其他文件將導入到all.scss中，具體例子請參見packages/ext-theme-base/sass/etc/“這就是整個ext js 5的theme制作了，整個流程就是這樣子的二、 EXT61 開發(fā)準備ExtJS 6.0 GPL正式版下載地址ExtJS 6.0離線文檔下載地址經(jīng)典版現(xiàn)代版Sencha

30、Tool下載地址（假設你的系統(tǒng)里已經(jīng)安裝了JRE，否則請下載帶JRE版本的Sencha Tool）安裝Sencha Tool默認安裝即可。解壓離線幫助文檔extjs-docs-6.0.0-classic.zip解壓ext-6.0.0-gpl.zip2 生成程序框架sencha -sdk ./ext-6.0.0 generate app -classic Nms ./Nms指定Ext源文件路徑D:EXTSenchaCmd02NEWzjsencha -sdk C:UserszjDesktopext-6.0.0-gplext-6.0.0 generate app -classic ZJ

31、 ./NEW/zjsencha -sdk C:UserszjDesktopext-6.0.0-gplext-6.0.0 generate app -classic ZJ ./NEW/zjsencha generate app ZJFRAME D:EXTSenchaCmd4NEW5sencha generate app ZJFRAME D:EXTSenchaCmd4NEW進入到Nms目錄，看到生成的工程cd Nms進入到該目錄執(zhí)行sencha app watch瀏覽器輸入http:/localhost:18413 定制樣式3.1 修改主題打開app.json，定位到t

32、heme: theme-triton改為theme: theme-neptune-touch并保存。觀察DOS窗口的變化?？梢钥吹?，橙色標識的部分表示sencha cmd 工具監(jiān)測到了文件被修改app.json被修改了，工具實時編譯，完成后再次輸出Waiting for changes，繼續(xù)監(jiān)聽文件是否有更改。刷新瀏覽器，看到主題變化已經(jīng)生效。3.2 修改全局主題變量為了能夠?qū)崟r看到修改后的效果，我們把瀏覽器地址增加一個參數(shù)http:/localhost:1841/?platformTags=fashion:true打開all.scss文件增加一行$base-color:dynamic(#12

33、3456);如下圖所示：回到瀏覽器頁面，效果如下：可以看到，標題和按鈕的顏色為我們設置的顏色值。查看哪些全局的主題變量可以修改，需要參考Ext Api Document3.3 配置組件的變量新建一個文件NmssassvarviewmainList.scss，該文件對應于代碼NmsappviewmainList.js，意味著我們將要修改視圖Nms.view.main.List的樣式。設置panel的背景$panel-body-background-color : dynamic(#4682B4);設置表頭背景$grid-header-background-color : dynamic(#F0F

34、FF0);設置行間隔顏色為透明$grid-row-cell-border-color : dynamic(transparent);設置列表行背景$grid-row-cell-background-color : dynamic(#FFFAFA);設置列表行交替背景$grid-row-cell-alt-background-color : dynamic(#FFEFD5);最終效果如下3.4 通過JS覆蓋(override)主題創(chuàng)建overridespanelPanel.js加入如下代碼Ext.define(Nms.panel.Panel, override : Ext.panel.Panel

35、,titleAlign : center);刷新頁面，觀察頁面變化。3.5 創(chuàng)建用戶組件UI每一個Ext Framework下的組件都擁有自己的UI設置參數(shù)，缺省下都是default，這個屬性可以給予單獨實體組件擁有自己的UI配參，可以讓你在同一類型組件下給予不同的樣式。Ext為各種組件提供了很多SASS mixins混入，你可以用這些mixins來生成新的UI，這可以從API中找到它們。如創(chuàng)建sasssrcpanelPanel.scss，增加include extjs-panel-ui ($ui:highlight-framed,$ui-header-background-color:#FF

36、6347,$ui-border-color:#FF6347,$ui-header-border-color:#FF6347,$ui-body-border-color:#FF6347,$ui-header-color:white);修改NmsappviewmainList.js代碼，增加ui : highlight,frame : true,兩個配置，刷新頁面，觀察頁面變化3.6 定制Image雙擊列表的某條記錄，彈出如下對話框，建立一個png文件當再雙擊列表記錄時，彈出的對話框圖標變?yōu)榱宋覀儎倓傇O置的圖標。我們使用的主題是theme-neptune-touch，對比一下目錄和文件名，就明白我

37、們?yōu)槭裁匆贜msresourcesimagesshared下面創(chuàng)建同名icon-question.png圖片了。4 開發(fā)詳解4.1 理解框架代碼.. 程序入口app.jsmainView配置項是用來創(chuàng)建的初始化視圖，也就是說程序在初始化時會創(chuàng)建類為“Nms.view.main.Main”的實例。注意，匿名類繼承的是Nms.Application類。3.1.2. Nms.Applicationstores存放的是全局或者共享的store，如果定義的store不在這里配置，則程序不會加載該store。3.1.3. Nms.view.main.Mainextend: E

38、xt.tab.Panel,繼承自Ext.tab.Panelcontroller: main,使用名字為main的控制器，Nms.view.main.MainController里有配置項alias: controller.mainviewModel: main,使用名字為main的視圖模型Nms.view.main.MainModel里有配置項alias: viewmodel.mainui: navigation,見第二章介紹header: layout: align: stretchmax , title: bind: text: name綁定的是對應的viewModel里配置項data.n

39、ame，見Nms.view.main.MainModelviewModel的好處是，當里面的數(shù)據(jù)發(fā)生變化時，bind到viewModel的視圖能立即更新 , flex: 0 , iconCls: fa-th-list ,responsiveConfig: tall: headerPosition: top當瀏覽器視圖高度大于寬度時，tab顯示在視圖頂部 , wide: headerPosition: left當寬度大于高度時，tab顯示在視圖左邊,高度大于寬度效果寬度大于高度效果items: title: Home, iconCls: fa-home, / The following grid

40、 shares a store with the classic versions grid as well! items: xtype: mainlistNms.view.main.List類的xtype: mainlist，是對類名的簡寫 , title: Users, iconCls: fa-user, bind: html: loremIpsum見dataModel的data.loremIpsum , title: Groups, iconCls: fa-users, bind: html: loremIpsum , title: Settings, iconCls: fa-cog,

41、bind: html: loremIpsum 可以看出，配有4個Tab項。3.1.4. Nms.view.main.ListExt.define(Nms.view.main.List, extend: Ext.grid.Panel, xtype: mainlist, ui : highlight, frame : true, requires: Nms.store.Personnel , title: Personnel, store: type: personnel使用的Nms.store.Personnel，其配置有alias: store.personnel, , columns: 有三

42、列，每列要顯示的值通過dataIndex指示 text: Name, dataIndex: name ,dataIndex的配置值對應于Nms.store.Personnel的fields里的項 text: Email, dataIndex: email, flex: 1 , text: Phone, dataIndex: phone, flex: 1 , listeners: select: onItemSelected注冊事件處理函數(shù)，當select事件發(fā)生時，調(diào)用controller的onItemSelected函數(shù) );事件及其處理函數(shù)的參數(shù)，參考幫助文檔。如點擊select跳轉(zhuǎn)到se

43、lect事件處理的函數(shù)原型3.1.5. Nms.view.main.MainControlleronItemSelected對應于Nms.view.main.List注冊的回調(diào)處理函數(shù)。3.1.6. Nms.view.main.MainModel略。4.2 開發(fā)實踐這一節(jié)，我們在原有程序上進行擴充，實現(xiàn)一個簡單的頁面。該頁面用來定制快捷菜單。..1. 創(chuàng)建頁面視圖Nms.view.system.CustomizeShortCuts創(chuàng)建一個js文件，如下圖所示：修改主視圖，將第二個tab頁面改為剛創(chuàng)建的視圖。刷新頁面，看一下頁面效果。4.2.2. 創(chuàng)建視圖對應的控制器

44、Nms.view.system.CustomizeShortCutsController該控制器里有視圖中【保存】按鈕對應的事件處理函數(shù)。其中，getVeiw()函數(shù)獲取的是注冊到該控制器的視圖，在這里指Nms.view.system.CustomizeShortCuts。我們需要注冊該控制器到視圖。在Nms.view.system.CustomizeShortCuts里放開注釋的那一行。刷新頁面，看一下效果。當點擊確定按鈕后，提示保存失敗。失敗的原因在于，程序需要向url: system/menu/saveShortCuts.action提交結果，而url對應的文件不存在，因此，我們在Nms

45、appviewsystem下創(chuàng)建一個文件saveShortCuts.action內(nèi)容為空。再次運行，提示保存成功。4.2.3. 初始化視圖Nms.view.system.CustomizeShortCuts的數(shù)據(jù)我們注意到，視圖的下拉框內(nèi)容為空，因為我們沒有為tagfield設置store。4.2.4. 創(chuàng)建storeNms.store.system.QuickStartMenuStore內(nèi)容如下：Ext.define(Nms.store.system.QuickStartMenuStore, extend: Ext.data.Store, model: Nms.model.system.Me

46、nuModel, proxy: type: ajax, api: read: system/menu/getMenusOfLeaf.action , reader: type: json );4.2.5. 創(chuàng)建modelNms.model.system.MenuModel內(nèi)容如下Ext.define(Nms.model.system.MenuModel, extend: Ext.data.Model,fields : id, text, cntType, icon, root, smallIcon, pId,pName, shortCut, quickStart, size, sort, mo

47、de );4.2.6. 創(chuàng)建模擬數(shù)據(jù)我們的store設置了從read: system/menu/getMenusOfLeaf.action下面獲取數(shù)據(jù)，因此，我們需要創(chuàng)建文件。文件內(nèi)容如下。 id :5c919ee03772a0f50137731a772f9923,text :全網(wǎng)監(jiān)視,root :false,icon :resources/images/menustore/area.png,smallIcon :resources/images/smallmenustore/area.png,cntType :globaltopo,size :-1,shortCut :1,quickStart :1,mode :0,pid :null,pName :null,sort :0,menuModel :nul