Extjs 5.0，动态地将项目添加到手风琴中

Extjs 5.0, add dynamically an item to an accordian

本文关键字：添加 项目 手风琴 动态 Extjs      更新时间：2023-09-26

我想在添加项目时将动态项目添加到我的手风琴布局中，折叠按钮不起作用。

如果我直接添加项目 - 不是动态 - 它工作正常。 如果您有一个简单的示例如何做到这一点，我将不胜感激。下面是我的代码：

<!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>

我已经简化了您的代码，以便它更具体地针对该问题，在简化它的过程中，我无法再复制该问题。由于代码Ext.onReady，我假设您使用 ExtJs 3。

当我第一次复制您的代码时，在选项卡面板的中间显示有关使用 Ext.create 的错误，所以我删除了面板，默认类型是面板，因此不需要这样做。

这是我目前正在测试的代码：

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

您能否尝试此代码，看看是否仍然遇到问题，如果是，请提供详细信息，我将通过回复更新此答案。祝项目好运。

编辑：请参阅工作煎茶小提琴

我已经通过在渲染之前添加一个侦听器来解决这个问题，listeners： {beforerender：addAccordion}并定义一个函数 addAccordion，如下所示：

var addAccordion = function（）{ var accordion_panel=Ext.getCmp（'west-panel'）; var item1 = {id： 'cardSetting' ，title： 'Card Settings' ，iconCls： 'settings'}; var item2 ={title： 'new item' ，iconCls： 'crv' }; accordion_panel.add（item1）; accordion_panel.add（item2）; };谢谢

相关文章：