一、Ext
Ext官方API：https://docs.sencha.com/extjs/6.2.0/modern/Ext.html
Ext是一个前端框架，底层是JavaScript，Ext提供了300+个类。提供丰富的视图组件。
有了Ext后我们就不用自己造轮子了，比如想要一个窗口，直接用Ext封装好的方法就可以。
1. Ext扩展JS的类
Ext在6.2.0 的版本有吐下这么多类
拿Ext.Array这个类来说。从图中可以看出，它提供了很多方法供用户使用
every方法的demo，every可以遍历指定的数组，返回false时结束遍历
// 2. Ext中的Array对象
var myArray = [1, 2, 3, 4, -5, -1];
Ext.Array.every(myArray, function (item) {
if(item > 0 ){
return true;
}else {
alert(item);
return false;
}
}, this);
filter方法的demo，filter方法可以过滤数组中的元素，返回false时被遍历的元素会被过滤掉
myArray = Ext.Array.filter(myArray, function (item) {
if(item>0){
return true;
}
})
alert(myArray.join("..."))
2. Ext组件示例
2.1 窗口
- 示例1：用
create API创建Window窗口，Window是Ext提供的类。只需要在create方法中传入对应的窗口属性。下面的代码将会生成一个窗口如图
var win2 = Ext.create('Ext.window.Window',{
width: 200,
height: 300,
title: "hello2"
});
win2.show();
2. 实际开发中，我们想要引入多个视图的情况下，可以通过script标签引入定义好的js组件。但是如果组件过多，script标签将会很臃肿，而且在加载的时候都会先加载script标签中的内容，会占用很多带宽，这样不是很友好。所以不推荐使用script标签引入js组件。
3. 为了解决上述问题，可以使用requires或require属性来实现异步加载。首先先声明名称空间，将js组件放入其中。需要的时候用require请求即可
定义一个窗口组件showWindow.js↓
Ext.define('view.showWindow',{
extend: 'Ext.window.Window',
width: 300,
height: 300,
title: "窗口1"
})
在页面index.html中声明名称空间，需要该组件的时候异步请求↓
<html>
<head>
<link href="../lib/theme-classic-all.css" rel="stylesheet">
<script src="../lib/ext-all.js"></script>
<!--将来组件很多的时候回很占用带宽,所以不推荐这种范式引入组件的js.解决如下,声明命名空间,用requires来异步加载-->
<!--<script type="text/javascript" src="view/showWindow.js"></script>-->
<script>
// 命名空间
Ext.Loader.setConfig({
enabled: true,
paths: {
// 声明一个名为`myApp`的名称空间
myApp: 'ext/view'
}
});
Ext.onReady(function () {
Ext.get('myWin').on('click', function () {
win1.show();
});
// 从视图里创建窗体
let win1 = Ext.create('view.showWindow',{
requires: ['view.showWindow']
});
})
</script>
</head>
<body>
<button id="myWin">show window</button>
</body>
</html>
