Window

Title

Window title 可以使用toolbar扩展更多功能。

Ext.create('Ext.window.Window', {
    title: {
        xtype: 'toolbar',
        items: [{
            xtype: 'tbtext',
            text: '文本'
        }, '->', {
            xtype: 'button',
            iconCls: 'x-fa fa-search',
            text: '按钮'
        }]
    }
    height: 200,
    width: 400,
    layout: 'fit',
    items: { // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{
            header: 'World'
        }], // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    }
}).show();

@mixin extjs-window-ui

窗口:window
窗口标题:header
窗口标题内框:header 与 window 之间部分

    $ui-padding: $window-padding,
    $ui-border-radius: $window-border-radius,        // 窗口边框圆角大小
    $ui-border-color: $window-border-color,          // 窗口边框颜色
    $ui-border-width: $window-border-width,          // 窗口的边框宽度
    $ui-inner-border-color: $window-inner-border-color,
    $ui-inner-border-width: $window-inner-border-width,

    $ui-header-color: $window-header-color,    // 标题前景色
    $ui-header-background-color: $window-header-background-color, // 标题背景颜色
    $ui-header-padding: $window-header-padding,
    $ui-header-font-family: $window-header-font-family,
    $ui-header-font-size: $window-header-font-size,
    $ui-header-font-weight: $window-header-font-weight,
    $ui-header-line-height: $window-header-line-height,
    $ui-header-text-padding: $window-header-text-padding,    // 标题内容内边距
    $ui-header-text-transform: $window-header-text-transform,
    $ui-header-border-color: $ui-border-color,               // 标题边框颜色
    $ui-header-border-width: $window-header-border-width,    // 标题边框宽度
    $ui-header-inner-border-color: $window-header-inner-border-color, // 标题内边框颜色
    $ui-header-inner-border-width: $window-header-inner-border-width, // 标题内边框宽度
    $ui-header-icon-width: $window-header-icon-width,
    $ui-header-icon-height: $window-header-icon-height,
    $ui-header-icon-spacing: $window-header-icon-spacing,
    $ui-header-icon-background-position: $window-header-icon-background-position,
    $ui-header-glyph-color: $window-header-glyph-color,
    $ui-header-glyph-opacity: $window-header-glyph-opacity,

    $ui-tool-spacing: $window-tool-spacing,
    $ui-tool-background-image: $window-tool-background-image,
    $ui-tool-focus-outline-color: $window-tool-focus-outline-color,
    $ui-tool-focus-outline-style: $window-tool-focus-outline-style,
    $ui-tool-focus-outline-width: $window-tool-focus-outline-width,
    $ui-tool-focus-outline-offset: $window-tool-focus-outline-offset,

    $ui-body-border-color: $window-body-border-color,
    $ui-body-background-color: $window-body-background-color,
    $ui-body-border-width: $window-body-border-width,
    $ui-body-border-style: $window-body-border-style,
    $ui-body-color: $window-body-color,
    $ui-body-font-size: $window-body-font-size,
    $ui-body-font-weight: $window-body-font-weight,
    $ui-body-font-family: $window-body-font-family,

    $ui-background-color: $window-background-color,

    // See the docs above
    $ui-force-header-border: $window-force-header-border,
    $ui-include-border-management-rules: $window-include-border-management-rules,
    $ui-wrap-border-color: null,
    $ui-wrap-border-width: null,
    $ui-ignore-frame-padding: $window-ignore-frame-padding,

    // deprecated - use $ui instead
    $ui-label: null

MessageBox

内部已经设置了工具栏的layout : { pack: "center"},所以不能设置对话框工具栏按钮的对齐方式。

results matching ""

    No results matching ""