看到很多人搜索这些关键词带来的访问，我觉得有必要专门写一篇文章提供给这些关键词，也算是推广一下ExtJS 组件化编程吧

我是实用ExtDesigner的，所以这里讲讲如何利用ExtDesigner设计自己的组件。

先来一个常用的例子，构建一个自己的Form组件，用ExtDesigner拖拖拽拽，一个简单的From就出来了，如图

之后我们给这个From设定一下参数，在ExtDesigner界面的右下角，其中有一个参数是很重要的，就是jsClass这个参数，这个参数设定的是此Form的对象名称 ，其他参数可以根据自己对界面样式的要求自定设定，比如宽度高度等，如图

设置好参数后，我们看一下它生成的源代码

他生成了一个叫做MyFormUi的对象，这个对象名称就是根据刚才参数中jsClass设定的。

现在我们保存一下工程，然后点击一下那个导出工程的按钮

找到刚才保存工程的文件夹，它会自动生成几个文件

其中有两个主要的js文件，MyForm.js和MyForm.ui.js，这两个文件一个是界面对象，一个是事件处理对象，ExtDesigner已经帮你把界面和逻辑分离的工作做好了，是不是很高级？如果你不理解为什么这么做，参考一下我的另外一篇文章：ExtJS编程思想和开发方式|ExtJS单页面系统|ExtJS单页面应用

MyForm.ui.js中的代码和上面图片上的是一样的，来看一下MyForm.js这个文件

注意看红框框里面那句话，目前这个文件都是ExtDesigner自动生成出来的。那句话啥意思我就不翻译了。

现在讲讲如何实现事件处理和添加自定义方法 ：

现在我们把MyForm对象改成这样，如图，红框框的部分是新加的代码

在 initComponent方法中增加了一个事件监听，this.addListener(‘afterrender’, this.init, this);，这个目的是增加一个自己的初始化方法（init）我们可以在这个init方法里面尽情的做自己需要做的事情，我在这个init方法里面又调 用了一个initListeners方法，因为某些时候我们要增加许多事件处理函数，所以把所有事件处理都放在这个initListeners方法中，比 较清晰。

我们的init函数是在afterrender之后调用的，注意：这个afterrender事件，在组件的声明周期内只有一次， 所以我们的初始化函数也只会被执行一次，也是因为afterrender，所以我们在刚刚new过之后，在没render之前，init方法里面做的一些 设置是无效的：例如init方法里面定义了一个变量this.myVar = ‘myvar’; 在form = new MyFrom() 之后直接调用form.myVar，这样是无效的 。

下面我们做一个初始化操作，并增加一个事件处理，如图：

MyForm = Ext.extend(MyFormUi, {
initComponent: function () {
this.addListener(‘afterrender’, this.init, this);
MyForm.superclass.initComponent.call(this);
},
init: function () {
this.setTitle(‘this is my first form component’);
this.initListeners();
},
initListeners: function () {
this.get(0).on(‘focus’, this.onFocus, this);
},
onFocus: function () {
alert(‘you focus me’);
}
});

初始化操作是设置MyForm的标题，

this.setTitle(‘this is my first form component’);

增加了一个响应focus事件的函数

this.get(0).on(‘focus’, this.onFocus, this);

当我们focus第一个文本框的时候，会调用onFocus函数，onFocus函数中执行了一个alert

我们看一下运行效果

以上就是利用ExtDesigner扩展一个原生组件成为自己的组件的简单例子，其他扩展大同小异

以后有时间再介绍如何扩展底层组件成为自己的控件。

此文原创，转载注明出处