ExtJS 组件扩展组件化编程扩展组件组件编程（二）

最新推荐文章于 2016-06-07 11:51:26 发布

xiaoshang

最新推荐文章于 2016-06-07 11:51:26 发布

阅读量1.4k

点赞数

分类专栏： ExtJS 文章标签：扩展 extjs 编程 function 工作 2010

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用ExtDesigner设计自定义ExtJS组件。通过实例演示创建并扩展原生Form组件的过程，包括设定参数、生成源代码、事件处理及自定义方法添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到很多人搜索这些关键词带来的访问，我觉得有必要专门写一篇文章提供给这些关键词，也算是推广一下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’);
}
});