Ext extentd Test

最新推荐文章于 2022-10-04 20:16:33 发布

最新推荐文章于 2022-10-04 20:16:33 发布 · 256 阅读

文章标签：

#EXT

ExtJS 专栏收录该内容

35 篇文章

订阅专栏

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

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
                    });

        });