Question

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

@include extjs-panel-ui（ $ ui：'darkgreen'， $ 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。有谁可以指出问题在哪里？

Answer 1

如果您的组件具有framed: true（面板的情况），则应将您的UI创建为-framed。请尝试以下代码： *只需快速说明，您应该更改用户界面的名称，但在面板中声明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
);

我做到了这一点，它对我有用 Panel with darkfgreen UI

无法创建ExtJS5面板UI

1 个答案: