Package problem Accordion Extjs

I am tring to start and build an accordion menu.

I want to use it as an xtype or new MyVar(). but i get few JS Errors

this is my code:

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 is the errors:

this.items.add is not a function

Line 12777

Thanks

Sample code:

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

Update

So sorry for didn’t notice I have written the item configurations into the prototype of the Application
object, which causes your this.items.add
cannot be called because they are basically simple json configurations!

The code has been fixed, please take a look and have a try. Should work :)

Personal Suggestion

If you are not going to share this components (use it in many places), I would suggest you to just create a Panel with the required configurations. Although creating components by extending other components is a good practice, but it is a lot more complicated and sometimes can cause problem just like I did earlier.

The code below should work also:

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

Although messy, but it’s easy to understand, right?

Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Package problem Accordion Extjs

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录