十三、自定义组件
有时候需要自定义组件使得Web程序更加丰富，ExtJS也提供了自定义组件的功能，主要通过Ext.define来实现。下面先新建一个MyPanel.html文件，其内容如下：
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">
<title>自定义Panel</title>
<link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>
<scripttype="text/javascript"src="bootstrap.js"></script>
<script type="text/javascript"src="MyPanel.js"></script>
</head>
<body>
<div id="myDiv"width="100%" height="100%" />
</body>
</html>
然后新建一个MyPanel.js和XZYPanel.js文件，自定义的组件名称为XZYPanel，XZYPanel.js文件的内容如下：
Ext.define('XZY.XZYPanel',{
extend:'Ext.panel.Panel', //继承的组件
alias:'widget.mypanel',
requires: ['Ext.window.MessageBox'],
title:'这是自定义的组件',
html:'你好，这是来自于自定义的组件!<br/>这是显示的内容。',
height:300,
initComponent : function(){ //初始化组件函数
Ext.Msg.alert('自定义组件','初始化');
this.callParent(); //返回至父容器中,这句是必须的
},
myPara01:'这是自定义的参数', //这是自定义的参数
showInfo:function(msg){//这是自定义的函数
alert('myPara01:'+this.myPara01+'\n消息:'+msg);
},
showSizeInfo:function(){ //这是自定义的函数
var dom = Ext.get(this.body.dom);
Ext.Msg.alert('自定义组件尺寸信息','DOM区域宽度：'+dom.getWidth()
+'<br/>高度：'+dom.getHeight());
}
});
从上面的代码可知，自定义的组件XZY.XZYPanel继承自Ext.panel.Panel，所以它具有Panel的所有配置项、属性和方法，如title、html、height等，也可以自定义一些属性和方法，如myPara01、showInfo()、showSizeInfo()等。值得注意的是initComponent函数为组件初始化函数，默认也可以不添加，但是有时候在涉及一些参数配置的情况下可以通过添加该函数在初始化组件的时候进行一些操作，在该函数中最后一定要添加this.callParent()，否则可能无法返回至父容器中。另外，this.body.dom为该组件所在的DOM，有时候要添加地图（如百度地图、Google地图），就可以添加至该DOM上，同时也可以设置该DOM的属性，如高度、宽度、颜色样式等，此处获取了它的宽度和高度。
在XZYPanel.js文件中添加了自定义的XZYPanel组件之后，接下来就开始使用自定义的组件，在MyPanel.js文件中添加如下内容：
Ext.Loader.setConfig({enabled: true});//允许设置参数
Ext.Loader.setPath('XZY', ''); //设置路径
Ext.onReady(function(){
var tempPanel = Ext.create('XZY.XZYPanel',{
myPara01:'这个参数已经被我修改了',
renderTo:myDiv
});
tempPanel.showInfo('Hello,world');//调用XZYPanel的showInfo函数
tempPanel.showSizeInfo();//调用XZYPanel的showSizeInfo函数
});
调用该自定义的组件和前面我们使用ExtJS中的组件方式基本一样，只是在前面需要设置其所在路径，由于本例中XZY.XZYPanel（XZYPanel.js文件）和MyPanel.js文件在同一个路径下，所以只需要设置XZY的路径为’’即可。保存这三个文件（MyPanel.html、MyPanel.js、XZYPanel.js）之后，浏览MyPanel.html网页，其结果如下图所示：