无法创建ExtJS5面板UI

时间:2014-10-21 14:41:34

标签: extjs extjs5

我正在尝试使用与常规颜色标题不同的颜色标题创建面板。由于将会有不同标题颜色的面板,我决定为每个面板创建不同的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。有谁可以指出问题在哪里?

1 个答案:

答案 0 :(得分:0)

如果您的组件具有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