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"}
,所以不能设置对话框工具栏按钮的对齐方式。