Question

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

如果我直接添加项目 - 不动态 - 它工作正常。如果你有一个简单的例子怎么做，我将非常感谢你的帮助。下面是我的代码：

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

Answer 1

我已经简化了你的代码，使其更具体地解决了这个问题，在简化它时我不能再复制这个问题了。由于Ext.onReady代码，我假设你使用ExtJs 3。

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

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

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

您是否可以尝试使用此代码并查看是否仍然存在问题，如果是，请提供详细信息，我将通过回复更新此答案。祝这个项目好运。

编辑：请参阅工作Sencha Fiddle

Answer 2

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

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

2 个答案: