Extjs 6 MVC開發模式（一）

時間 2019-11-09

標籤 extjs mvc 開發模式简体版

原文原文鏈接

一、Extjs就緒函數javascript

1）導入Extjs的CSScss

<link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_1.css">
<link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_2.css">

2）導入Extjs的核心JShtml

<script type="text/javascript" src="extjs-all.js"></script>

3）導入Extjs的本地化JS（動態加載）java

<script type="text/javascript" src="js/locale/locale-zh_CN.js"></script>

4）編寫Extjs就緒函數（必須在覈心庫導入以後）函數

<script type="text/javascript">
        Ext.onReady(function(){
            //coding
            Ext.MessageBox.alert("Title","Hello World!!!");
});    
</script>

代碼分析:佈局

就緒函數Ext.onReady();ui

回調函數:function(){}spa

回調函數:Ext/Jquery函數中聲明自定義函數,確保函數之間的執行順序。debug

二、瞭解各個文件的做用code

核心庫：

ext-6.0.1\build\

ext.js 最基礎的核心庫

ext-debug.js 原文件

ext-all.js 包含全部組件的的核心庫

ext-all-debug.js 原文件

樣式風格模板：Extjs提供動態樣式功能

ext-6.0.1\build\classic\theme-classic\resources

ext-6.0.1\build\classic\theme-aria\resources

ext-6.0.1\build\classic\theme-crisp\resources

ext-6.0.1\build\classic\theme-gray\resources

ext-6.0.1\build\classic\theme-neptune\resources

theme- xxxx -all.css（須要運行環境，可選，導入下面兩個文件）

theme-xxxx-all_1.css（必須）

theme-xxxx-all_2.css（必須）

去水印:

在樣式文件夾（theme-xxxx-all_1.css或theme-xxxx-all_2.css中找）把content:'d'全替換爲content:''

國際化：

ext-6.0.1\build\classic\locale

經典例子代碼：

官方的例子網址：

http://examples.sencha.com/extjs/6.0.1/examples/

三、Extjs Layout

視圖組件(Viewport,Panel)的layout屬性配合items屬性實現。

注意：1）items最好不要嵌套3層以上。

　　 2）語法中最後一個屬性不要帶逗號。

經常使用的佈局：border，fit，accordion，anchor，column，hbox，vbox，table，card等等

理解：佈局的嵌套（items嵌套）

Border：

Region：上北、下南、左西、右東、中間（中間必定要有）

上北、下南（設置高度）

左西、右東（設置寬度）

（有些時候會出現xtype找不到對象，大多數緣由是組件沒有被加載或者是沒有定義widget.組件名）

代碼實例：

 1 <!DOCTYPE><!—解決HTML5的兼容 -->
 2 <html>
 3     <head>
 4         <title>ExtJS Foundation Demo 02 Layout</title>
 5         <meta charset="utf-8"/>
 6         <!—1.導入Extjs的CSS（動態加載）-->
 7         <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_1.css">
 8         <link rel="stylesheet" type="text/css" href="resources/theme-neptune-all_2.css">
 9         <!—2.導入Extjs的核心JS-->
10         <script type="text/javascript" src="js/ext-all.js"></script>
11         <!—3.導入Extjs的本地化JS（動態加載）-->
12         <script type="text/javascript" src="js/locale/locale-zh_CN.js"></script>
13 
14         <!—4.編寫Extjs的就緒函數-->
15         <script type="text/javascript">
16             //回調函數:Ext/Jquery函數中聲明自定義函數,確保函數之間的執行順序。
17             Ext.onReady(function(){
18                     Ext.create('Ext.Viewport', {
19                         layout: 'border',
20                         items: [{
21                             region: 'north',
22                             height: 38,
23                             title: 'North'//,
24                             //split: true,
25                             //collapsible: true,
26                             //layout: 'fit',
27                             //items: []
28                             //html: 'north'
29 
30                         },{
31                             region: 'west',
32                             width: '20%',
33                             title: 'West',
34                             collapsible: true,
35                             //html: 'west'
36                             layout:'accordion',
37                             items: [{
38                                 xtype:'tabpanel',
39                                 title:'Tabs模塊',
40                                 items:[{
41                                     xtype:'panel',
42                                     title:'Tabs1模塊'
43                                 },{
44                                     xtype:'panel',
45                                     title:'Tabs2模塊'
46                                 }]
47                             },{
48                                 xtype:'panel',
49                                 title:'訂單管理模塊'
50                             },{
51                                 xtype:'panel',
52                                 title:'客戶管理模塊'
53                             },{
54                                 xtype:'panel',
55                                 title:'流程管理模塊'
56                             }]
57                         },{
58                             region: 'center',
59                             title: 'Center',
60                             html: 'center'
61                         }]//視圖組件容器 div
62                     });
63             });    
64         </script>
65     </head>
66     
67     <body>
68     </body>
69 </html>