Reputation: 9

Extjs 5.0, add dynamically an item to an accordian

i want to add dynamically items to my accordion layout when items are added the collapse buttons are not working.

if i add items directly - not dynamically- it works fine. if you have please a simple example how to do it, i will appreciate your help. below is my code:

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="framework/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
    <script type="text/javascript" src="framework/build/ext-all.js"></script> 
    <script type="text/javascript" src="framework/build/packages/ext-theme-gray/build/ext-theme-gray.js"></script>

</head>
<body>
    <script >
        Ext.onReady(function(){

        var viewport = new Ext.Viewport({
            layout: 'border',
            renderTo: Ext.getBody(),
            items: [
                {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                layout: {
                    type: 'accordion',
                    titleCollapse: false,
                    animate: true,
                    activeOnTop: true
                },
                title: 'West',
                split: true,
                width: 300,
                minWidth: 175,
                maxWidth: 400,
                collapsible: false,
               animCollapse: false,
                margins: '0 0 0 5',
                items: [{id: 'generalParam' ,title: 'General Param'                 ,iconCls: 'nav' ,
                dockedItems: [{xtype: 'toolbar',dock: 'left',margins: '5 5 5 5',
                                items: [
                                        {xtype: 'button',text: 'Currency'   ,iconCls:'chr'}, 
                                        {xtype: 'button',text: 'Area'       ,iconCls:''},
                                        {xtype: 'button',text: 'Bank'       ,iconCls:''},
                                        {xtype: 'button',text: 'Network'    ,iconCls:''},
                                        {xtype: 'button',text: 'MCC'        ,iconCls:''},
                                        {xtype: 'button',text: 'Static Data',iconCls:''},
                                        {xtype: 'button',text: 'Interfaces' ,iconCls:''},
                                        {xtype: 'button',text: 'Sequences'  ,iconCls:''},
                                        {xtype: 'button',text: 'MCC'        ,iconCls:''}
                                ]}]

                                }
                ]
            },
            Ext.create('Ext.tab.Panel', {
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                items: [{
                    bodyStyle: 'background-image:url(images/square.gif)',
                    html: 'Internal notes go here',
                    title: 'Welcome',
                    closable: true,
                    autoScroll: true
                }]
            }),         {
                xtype: 'tabpanel',
                autoShow:true,
                region: 'east',
                title: 'Information',
                animCollapse: true,
                collapsible: true,
                split: true,
                width: 275, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                activeTab: 1,
                tabPosition: 'bottom',
                items: [{
                    html: '<p>A TabPanel component can be a region.</p>',
                    title: 'A Tab',
                    autoScroll: true
                }, Ext.create('Ext.grid.PropertyGrid', {
                        title: 'Property Grid',
                        closable: false,
                        source: {
                            "(name)": "Properties Form",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
                        }
                    })]
            },
            {
                xtype:'panel',
                region: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                collapsed: true,
                title: 'South',
                margins: '10 10 10 10'
            }
            ]
            }); 


            var item1 = {id: 'cardSetting'  ,title: 'Card Settings'                 ,iconCls: 'settings'}; 
            var item2 ={title: 'new item'               ,iconCls: 'crv' };

            Ext.getCmp('west-panel').add(item1);
            Ext.getCmp('west-panel').add(item2);
            Ext.getCmp('west-panel').doLayout();
    });
    </script>
</body>
</html>

Upvotes: 0

Answers (2)

khalid

Reputation: 9

i have solved the issue by adding an listener beforerender, listeners: {beforerender:addAccordion} and define a function addAccordion as below:

Upvotes: 0

Scriptable

Reputation: 19750

I've simplified your code a little so that its a bit more specific to the issue, in simplifying it I'm not able to replicate the issue anymore. I'm presuming your using ExtJs 3 due to the Ext.onReady code.

When I first copied your code, there were errors showing regarding the use of Ext.create in the middle for the tab panel, So I removed the panel, The default type is a panel so there is no need for this.

Here is the code I am currently testing against:

Ext.onReady(function () {

    var viewport = new Ext.Viewport({
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [
            {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                layout: {
                    type: 'accordion',
                    titleCollapse: false,
                    animate: true,
                    activeOnTop: true
                },
                title: 'West',
                split: true,
                width: 300,
                minWidth: 175,
                maxWidth: 400,
                collapsible: false,
                animCollapse: false,
                margins: '0 0 0 5',
                items: [{
                    id: 'generalParam',
                    title: 'General Param',
                    iconCls: 'nav',
                    html: '<p>Panel content!</p>'
                }, {
                    id: 'cardSetting',
                    title: "Card Settings",
                    iconCls: "settings",
                    html: '<p>Panel content!</p>'
                }]
            },
            {
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                items: [{
                    bodyStyle: 'background-image:url(images/square.gif)',
                    html: 'Internal notes go here',
                    title: 'Welcome',
                    closable: true,
                    autoScroll: true
                }]
            }
        ]
    });


    var item1 = {id: 'cardSetting2', title: 'Card Settings2', iconCls: 'settings', html: '<p>Panel content!</p>'};
    var item2 = {title: 'new item 3', iconCls: 'crv', html: '<p>Panel content!</p>'};

    Ext.getCmp('west-panel').add(item1);
    Ext.getCmp('west-panel').add(item2);
    Ext.getCmp('west-panel').doLayout();
});

Could you try this code and see if you still get the issue, if so please provide details and I will update this answer with a response. Good luck with the project.

EDIT: Please see working Sencha Fiddle

Upvotes: 1

Extjs 5.0, add dynamically an item to an accordian

Answers (2)

Related Questions