无法创建 ExtJS5 面板 UI答案

【问题标题】：unable to create ExtJS5 panel UI无法创建 ExtJS5 面板 UI
【发布时间】：2014-10-21 14:41:34
【问题描述】：

我正在尝试创建一个与常规颜色标题不同的面板。由于会有不同标题颜色的面板，我决定为每个面板创建不同的用户界面。以下是其中之一的示例代码：

@include extjs-panel-ui( $ui: '深绿色', $ui-border-color: $panel-light-border-color, $ui-body-border-color: $panel-light-body-border-color, $ui-header-border-color: $panel-light-header-border-color, $ui-header-font-family：$panel-light-header-font-family， $ui-header-font-size: $panel-light-header-font-size, $ui-header-font-weight: $panel-light-header-font-weight, $ui-header-color: $panel-light-header-color, $ui-header-background-color: #666, $ui-header-text-transform: $panel-light-header-text-transform, $ui-tool-background-image: $panel-light-tool-background-image );

在创建它并构建我的应用程序后，我添加了一个带有 ui: 'darkgreen' 的面板，但没有任何效果。相反，面板没有应用 css。有人可以指出问题出在哪里吗？

【问题讨论】：

标签： extjs extjs5

【解决方案1】：

当您的组件具有framed: true（面板就是这种情况）时，您应该将您的 UI 创建为 -framed。试试下面的代码： * 只是一个简短的说明，您应该更改 UI 的名称，但在面板中声明 ui: 'darkgreen'

@include extjs-panel-ui(
    $ui:"darkgreen-framed",
    $ui-border-color: $panel-frame-border-color,
    $ui-border-radius: $panel-frame-border-radius,
    $ui-border-width: $panel-frame-border-width,
    $ui-padding: $panel-frame-padding,
    $ui-header-color: #FFF,
    $ui-header-font-family: $panel-header-font-family,
    $ui-header-font-size: $panel-header-font-size,
    $ui-header-font-weight: $panel-header-font-weight,
    $ui-header-line-height: $panel-header-line-height,
    $ui-header-border-color: $panel-frame-border-color,
    $ui-header-border-width: $panel-frame-header-border-width,
    $ui-header-border-style: $panel-header-border-style,
    $ui-header-background-color: #666,
    $ui-header-background-gradient: $panel-header-background-gradient,
    $ui-header-inner-border-color: $panel-frame-header-inner-border-color,
    $ui-header-inner-border-width: $panel-frame-header-inner-border-width,
    $ui-header-text-padding: $panel-header-text-padding,
    $ui-header-text-margin: $panel-header-text-margin,
    $ui-header-text-transform: $panel-header-text-transform,
    $ui-header-padding: $panel-frame-header-padding,
    $ui-header-icon-width: $panel-header-icon-width,
    $ui-header-icon-height: $panel-header-icon-height,
    $ui-header-icon-spacing: $panel-header-icon-spacing,
    $ui-header-icon-background-position: $panel-header-icon-background-position,
    $ui-header-glyph-color: $panel-header-glyph-color,
    $ui-header-glyph-opacity: $panel-header-glyph-opacity,
    $ui-header-noborder-adjust: $panel-header-noborder-adjust,
    $ui-tool-spacing: $panel-tool-spacing,
    $ui-tool-background-image: $panel-tool-background-image,
    $ui-body-color: $panel-body-color,
    $ui-body-border-color: $panel-body-border-color,
    $ui-body-border-width: $panel-frame-body-border-width,
    $ui-body-border-style: $panel-body-border-style,
    $ui-body-background-color: $panel-frame-background-color,
    $ui-body-font-size: $panel-body-font-size,
    $ui-body-font-weight: $panel-body-font-weight,
    $ui-body-font-family: $panel-body-font-family,
    $ui-background-stretch-top: $panel-background-stretch-top,
    $ui-background-stretch-bottom: $panel-background-stretch-bottom,
    $ui-background-stretch-right: $panel-background-stretch-right,
    $ui-background-stretch-left: $panel-background-stretch-left,
    $ui-include-border-management-rules: $panel-include-border-management-rules,
    $ui-wrap-border-color: null,
    $ui-wrap-border-width: null,
    $ui-ignore-frame-padding: $panel-ignore-frame-padding
);

我已经这样做了，它对我有用

【讨论】：

正是我想要的。谢谢。