ExtJS 中的简单组件继承

• 下载演示组件 - 1.42 KB

引言

ExtJS 是一个非常棒的 JavaScript 库，其中包含很棒的表单构建组件。但是，像所有事物一样，当你开始积极使用它时，很快就会发现它无法开箱即用地完成某些事情，并且你想扩展它。

我有一个由标准 Ext.form 组件组成的表单，但后来我想在其他表单元素中输出几个 DIV，以便我可以将一些特殊内容渲染到它们。具体来说，我有一个报告，它被分成几个部分，每个部分都可以附加文件。我想显示一个按钮来调出一个文件上传对话框和一个已上传文件列表。有意思的是，我使用的文件上传对话框可以在这里找到 - 它真的非常好！

因此，我需要开发一个 Ext.component 类的扩展，它可以渲染我的 div。这很简单，但花了不少功夫去调查和搜索源代码，才弄清楚需要什么，所以我认为我应该创建一个小演示组件，并在这里发表一篇文章，以节省大家的时间。

如果你正在寻找专门化现有组件的方法，这里有一个很好的例子这里。

使用代码

基本上，你需要三个东西才能让它工作（你甚至可能需要更少的，但我实现了这三个，然后我就很高兴了）：initComponent，onRender 和 afterRender。 基本上，我从 Ext.Button 类开始，弄清楚它是如何工作的，然后应用了“电锯”（指删减和修改）。

请注意第一行注册命名空间，以及最后一行使用唯一的 xtype 注册控件，该 xtype 可用于通过 ExtJS 识别它。

所有好的事情都发生在 onRender() 中。我创建了一个模板，该模板用于渲染包含配置字符串 text1 和 text2 的 HTML。然后，使用 insertBefore() 或 append() 函数渲染此内容（取决于是否已提供元素的位置）。这些函数从参数 targs 中执行模板字符串中的替换。

Ext.namespace('Ext.ensigma');

Ext.ensigma.DemoComponent = Ext.extend(Ext.Component, {
    initComponent : function(){
        Ext.ensigma.DemoComponent.superclass.initComponent.call(this);
    },

    // private
    onRender : function(ct, position){
        if(!this.template){
            if(!Ext.ensigma.DemoComponent.filesetTemplate){
                Ext.ensigma.DemoComponent.filesetTemplate = new Ext.Template(
                    '<div><div>{0}</div><div>{1}</div></div>'
        );
            }
            this.template = Ext.ensigma.DemoComponent.filesetTemplate;
        }
        var fs, targs = [this.text1 || '&#160;', this.text2 || '&#160;'];

        if(position){
            fs = this.template.insertBefore(position, targs, true);
        }else{
            fs = this.template.append(ct, targs, true);
        }
        this.el = fs;
     }

    // private
    afterRender : function(){
        Ext.ensigma.DemoComponent.superclass.afterRender.call(this);
    }
});
Ext.reg('fileset', Ext.ensigma.DemoComponent);

这是使用该组件的示例代码

Ext.onReady(function(){
    Ext.QuickTips.init();

    var simple = new Ext.FormPanel({
        labelWidth: 75, 
        frame:true,
        title: 'Fileset Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [new Ext.form.TextField ({
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
        }), new Ext.ensigma.DemoComponent ({
        text1: 'hello world',
        text2: 'goodbye cruel world',
        autoWidth: true
    })
        ]
    });

    simple.render(document.body);
});

技巧

应该注意永远不要在列表末尾有尾随逗号。例如，[1,2,3] 永远不应编码为 [1,2,3,]。在 Firefox 中（就像在 C 中一样），[1,2,3,] 是一个包含三个项目的列表；在 IE 中，它是一个包含四个项目的列表，其中最后一项未定义。额外的列表项会导致 IE 中出现错误，有时甚至会显示空白文档且没有错误消息。根据尾随逗号的位置，可能会显示以下任何消息

• 错误：“events”为空或不是对象
• 错误：应为标识符字符串或数字
• 错误：“undefined”为空或不是对象

历史

• 2008 年 5 月 12 日
• 将 this.el = fs 行添加到 onRender(...)。在某些情况下，需要这样做才能使 IE 正常工作，或者当组件包含在容器中时。
• 添加了有关尾随逗号和导致的错误消息的说明。