无法创建ExtJS5面板UI

Question

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

@包括extjs-面板-ui( $ui：‘深绿色’，$ui-边框颜色：$面板-浅色边框颜色，$ui-体边框颜色：$面板-亮体-边框颜色，$ui-头-边框-颜色：$面板-光标题-边框颜色，$ui-标题-字体-家庭：$面板-轻标题-字体-家庭，$ui-标题-字体大小：$面板-轻型标题-字体大小，$ui-标题-字体-重量：$面板-轻头-字体-重量：$ui-标题-颜色：$面板-轻头-颜色，$ui-标题-背景颜色：# #666，$ui-标题-文本-转换：$面板-轻标题-文本-转换：$面板-轻标题-文本-转换，$ui-工具-背景-图像：$面板-光-工具-背景-图像)；

在创建它并构建我的应用程序之后，我包含了一个带有ui的面板：‘深绿色’，但是没有效果。相反，面板没有应用css。有人能指出问题出在哪里吗？

Answer 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
);

我做过这件事，对我来说很管用

​