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.组件名）
代码实例：
<!DOCTYPE><!—解决HTML5的兼容 -->
<html>
<head>
<title>ExtJS Foundation Demo 02 Layout</title>
<meta charset="utf-8"/>
<!—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="js/ext-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/Jquery函数中声明自定义函数,确保函数之间的执行顺序。
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
region: 'north',
height: 38,
title: 'North'//,
//split: true,
//collapsible: true,
//layout: 'fit',
//items: []
//html: 'north' },{
region: 'west',
width: '20%',
title: 'West',
collapsible: true,
//html: 'west'
layout:'accordion',
items: [{
xtype:'tabpanel',
title:'Tabs模块',
items:[{
xtype:'panel',
title:'Tabs1模块'
},{
xtype:'panel',
title:'Tabs2模块'
}]
},{
xtype:'panel',
title:'订单管理模块'
},{
xtype:'panel',
title:'客户管理模块'
},{
xtype:'panel',
title:'流程管理模块'
}]
},{
region: 'center',
title: 'Center',
html: 'center'
}]//视图组件容器 div
});
});
</script>
</head> <body>
</body>
</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