ExtJS 4 - 如何设置树面板的背景（包括树节点）

发布于 2024-12-17 22:53:30 字数 407 浏览 3 评论 0原文

我正在尝试更改 extjs 4 中 Treepanel 的背景颜色。到目前为止，我已经创建了一个具有所需颜色的自定义 css 类，并将其应用到面板及其视图

    {
        baseCls: "mycustomclass",
        viewConfig: {baseCls: "mycustomclass"}
        (...)
    }

，此代码在各处设置了面板区域的背景但对于树节点。树节点仍然是白色的。所以我的问题是如何设置整个树面板（包括节点）的背景颜色。

这是它的外观的屏幕截图 - 绿色是我的树面板区域。这些节点也属于树形面板，但为白色

screenshot

原文

I'm trying to change the background color of a Treepanel in extjs 4. So far I've created a custom css class with the desired color and applied it to the panel and its view

    {
        baseCls: "mycustomclass",
        viewConfig: {baseCls: "mycustomclass"}
        (...)
    }

And this code sets the background of the panel area everywhere but for the tree nodes. Tree nodes are still white. So my question is how to set the background color of the entire tree panel, including nodes.

here's a screenshot of how it looks like - the greenish color is my treepanel area. The nodes also belong to treepanel but are white

screenshot

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遥远的绿洲 2024-12-24 22:53:30

我找到了一个解决方案，它是：

    .navpanel 
    {
        background-color: #c0c0c0;
    }

    .navpanel .x-grid-cell
    {
        background-color:#c0c0c0;
    }
    .navpanel .x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div
    {
        background-color:#f0f0f0 !important;
        font-weight: bold;
    }

“navpanel”类应用于我的树面板视图（通过 viewConfig）。
所有其他类都会覆盖标准 extjs css，因此它们需要在 extjs css 之后加载。谷歌浏览器的“检查元素”功能在这里非常有用。

I have found a solution and here it is:

    .navpanel 
    {
        background-color: #c0c0c0;
    }

    .navpanel .x-grid-cell
    {
        background-color:#c0c0c0;
    }
    .navpanel .x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div
    {
        background-color:#f0f0f0 !important;
        font-weight: bold;
    }

The 'navpanel' class is applied to my treepanel's view (via viewConfig).
All other classes are overrides to standard extjs css so they need to be loaded after extjs css. Google Chrome's 'inspect element' function was very helpful here.

回复收藏 0 原文