javascript - 在 extjs 中创建侧面可折叠面板导航是否正确？

Question

Ext.application({
    name: 'Fiddle',
    launch: function() {
            var mainView = new Ext.panel.Panel({
            xtype: 'panel',
            //title: 'Container',
            layout: 'border',
            itemId: 'bigContainer',
            height: '100vh',
            items: [{
                xtype: 'panel',
                //title: 'Left Panel',
                itemId: 'menuLeftPanel',
                region: 'west',
                scrollable: true,
                //width: 300,
                //height: 900,
                dockedItems:
                [{
                    xtype: 'tabpanel',
                    collapseMode: 'header',
                    //animCollapse: 200,
                    dock: 'left',
                    id: 'moduleTas',
                    itemId: 'moduleTabs',
                    width: 400,
                    collapsible: true,
                    headerPosition: 'left',
                    hideCollapseTool: true,
                    //activeTab: 0,
                    tabBarHeaderPosition: 0,
                    tabRotation: 0,
                    items: [{
                        xtype: 'panel',
                        scrollable: 'y',
                        tabConfig: {
                            xtype: 'tab',
                            iconCls: 'x-fa fa-home',
                            tooltip: "Home",
                            listeners:
                            {
                                click: function(btn, e, eOpts)
                                {
                                    var tab = Ext.getCmp('moduleTas');
                                    tab.toggleCollapse();
                                }
                            }
                        },
                    },
                    ]
                },
                ]
            }],
            renderTo: Ext.getBody()
        });
    }
});

标签： javascriptextjsnavigationpanel

Answer 1

Sencha 在下载框架时提供了一个“Admin Dashboard”示例应用程序，它实现了可折叠的侧边导航。以下布局的所有源代码（以及厨房水槽中的每个组件）都可以在框架下载中找到。

管理员仪表板

管理仪表板源代码

这不是您应该重新创建自己的东西（无法使用像 Extjs 这样的框架）