Проблема упаковки Extjs Аккордеон

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!

Код был исправлен, пожалуйста, посмотрите и попробуйте.Должно работать:)

Личное предложение

Если вы не собираетесь делиться этими компонентами (используйте его во многих местах), я бы предложил вам просто создать панельс необходимыми настройками.Хотя создание компонентов путем расширения других компонентов является хорошей практикой, но это намного сложнее и иногда может вызвать проблемы, как я это делал ранее.

Код ниже также должен работать:

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 («Приложение»);