Question

我想开始并建立一个手风琴菜单我想将它用作xtype或新的MyVar（）。但我得到的JS错误很少这是我的代码：

var AccordionMenu = Ext.extend(Ext.Panel, {
    layout: 'accordion',
    id:'action-panel',
        region:'west',
        split:true,
        collapsible: true,
        collapseMode: 'mini',
        width:200,
        minWidth: 150,
        border: false,
        baseCls:'x-plain',

    items: [{
        title: 'Affiliates',
        html: 'Empty',
        cls: 'empty'
    },{
        title: 'Brands',
        html: 'Empty',
        cls: 'empty'
    }]
});

Ext.reg('accordion_menu', AccordionMenu);

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


            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new AccordionMenu()
                   ,
                   {
                    region:'center',
                    margins:'5 5 5 0',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'test'
                }]
            });

});

这是错误：

    this.items.add is not a function

Line 12777

由于

Answer 1

示例代码：

var AccordionMenu = Ext.extend(Ext.Panel, {
    constructor: function(cfg) {
        var config = {
            layout: 'accordion',
            region: 'west',
            split: true,
            width: 200,
            layout: 'accordion',
            animate: true,
            fill: true,
            items: [{
                title: 'Affiliates',
                html: 'Empty',
                cls: 'empty'
            },{
                title: 'Brands',
                html: 'Empty',
                cls: 'empty'
            }]
        };
        Ext.apply(config, cfg);
        AccordionMenu.superclass.constructor.call(this, config);
    }
});

Ext.reg('accordion_menu', AccordionMenu);


Ext.onReady(function() {
    Ext.QuickTips.init();
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            new AccordionMenu(),
        {
            region:'center',
            margins:'5 5 5 0',
            cls:'empty',
            bodyStyle:'background:#f1f1f1',
            html:'test'
        }]
    });
});

<强>更新

很抱歉没有注意到我已将项目配置写入Application对象的原型，这导致您的this.items.add无法被调用，因为它们基本上是简单的json配置！

代码已经修复，请看看并尝试一下。应该工作：）

个人建议

如果您不打算共享此组件（在许多地方使用它），我建议您只创建一个具有所需配置的Panel。虽然通过扩展其他组件来创建组件是一种很好的做法，但它更复杂，有时会像我之前那样引起问题。

以下代码也适用：

Ext.onReady(function() {
    Ext.QuickTips.init();
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            layout: 'accordion',
            region: 'west',
            split: true,
            width: 200,
            layout: 'accordion',
            animate: true,
            fill: true,
            items: [{
                title: 'Affiliates',
                html: 'Empty',
                cls: 'empty'
            },{
                title: 'Brands',
                html: 'Empty',
                cls: 'empty'
            }]
        },{
            region:'center',
            margins:'5 5 5 0',
            cls:'empty',
            bodyStyle:'background:#f1f1f1',
            html:'test'
        }]
    });
});

虽然很乱，但很容易理解，对吧？

Answer 2

从Ext.ns开始（'应用'）;

问题包装Extjs手风琴

2 个答案: