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