Extjs 6 MVC开发模式（一）
1、Extjs就绪函数
1）导入Extjs的CSS
<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的核心JS
<script type="text/javascript" src="extjs-all.js"></script>
3）导入Extjs的本地化JS（动态加载）
<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();
回调函数:function(){}
回调函数:Ext/Jquery函数中声明自定义函数,确保函数之间的执行顺序。
2、了解各个文件的作用
核心库：
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/
3、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>
4、Extjs常有函数
Ext.require()；//加载Ext类，只加载一次。
Ext.create()；//相当于new Ext对象（组件）。
【温馨提示】ext-4.0.7-gpl及ext-premium-6.0.1-trial已上传到百度云盘，需要的朋友可自行下载
链接: http://pan.baidu.com/s/1dErfnxv
密码: aqv6
