使用Ext JS的垂直导航菜单（页面左侧）

Question

我正在尝试使用ExtJS在网页的左侧创建一个垂直导航菜单。我在http://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/启发了示例仪表板。甚至谷歌搜索都没有提供任何示例代码。如果有人可以提供示例代码，我会非常感激。

Answer 1

对于该示例，看起来他们正在使用选项卡面板来实现此功能。

在选项卡面板中添加两个配置tabPosition：'left'和tabRotation：0，然后您将拥有左侧选项卡。然后你可以使用cls或ui configs来应用这种风格。

Ext JS Kitchen Sink也有例子。请查看以下链接：http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#side-navigation-tabs

Answer 2

那时候，我做了如下：

如果您查看HTML源代码（＆＃34;检查元素＆＃34;），您会看到左侧部分HTML开始

<div class="x-treelist ...

指向xtype:'treelist'（x-panel就像xtype:'panel'而x-container就是xtype:'container'）。

然后，文档应该为您提供有关一般用法的所有信息;有关sencha如何在这种特殊情况下执行此操作的详细信息，您可以在浏览器控制台中输入：

console.log(Ext.ComponentQuery.query("treelist")[0]);

至少Chrome会向您返回组件，您可以在其中浏览所有属性以查看例如他们使用了什么配置等。

对于相关的CSS，您可以导航DOM树并从CSS选项卡将相关的CSS信息复制到项目中，例如

.x-treelist-navigation {
    background-color: #32404e;
    background-position-x: 44px;
    padding: 0 0 0 0;
}
...