Ext extentd Test-优快云博客

本文介绍如何在ExtJS中创建自定义面板组件，并通过两种不同的实现方式对比展示如何正确地利用构造函数与初始化方法来确保传入参数的正确应用。

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

Ext.namespace('Ext.ux.taink');

/*-------------------------- declare -------------------------------------------*/

/*
* 优先使用傳進業的參數
*
*
*/
Ext.ux.taink.mypanel = Ext.extend(Ext.Panel, {
            // 自定义变量
            mytitle : 'init title name',
            mywidth : null,
            myheight : null,
            // 初始化方法
            initComponent : function(config) {
                Ext.apply(this, {
                            title : this.mytitle,
                            width : this.mywidth,
                            height : this.myheight
                        });
                Ext.ux.taink.mypanel.superclass.initComponent.apply(this,
                        arguments);

                this.on('click', function() {
                            alert("sdfsdf");
                        }, this);
            }
        });

Ext.reg('mypanel', Ext.ux.taink.mypanel);

/*-------------------------- declare -------------------------------------------*/

/*
* 傳進來的參數不起作用
*
*
*/
Ext.ux.taink.mypanelTemp = Ext.extend(Ext.Panel, {
            // 自定义变量
            title : 'init title name',
            mywidth : null,
            myheight : null,
            // 构造方法
            constructor : function(config) {
                Ext.apply(this, {
                            title : this.title,
                            width : this.mywidth,
                            height : this.myheight
                        });
                // 調用構造方法
                Ext.ux.taink.mypanelTemp.superclass.constructor.apply(this,
                        arguments);

                this.on('click', function() {
                            alert("sdfsdf");
                        }, this);
            }
        });

Ext.reg('mypanelTemp', Ext.ux.taink.mypanelTemp);

/*------------------------- test --------------------------------------------*/
Ext.onReady(function() {

            var panel_01 = new Ext.ux.taink.mypanel({
                        renderTo : 'divUserGrid',
                        mytitle : 'JavaTester123',
                        title : 'java',
                        mywidth : 300,
                        myheight : 100,
                        frame : true
                    });

            var panel_02 = new Ext.ux.taink.mypanelTemp({
                        renderTo : 'divUserGrid',
                        frame : true,
                        title : 'constructorMethod',
                        mytitle : 'ExtDamo',
                        width : 300,
                        height : 100
                    });

        });