7.5.0 classic
仪表板组件,可实现动态拖拽布局 主要配置项:
用于创建仪表板项目的组件工厂 主要配置项:
{
collapsed: '{collapsed}',
columnIndex: '{columnIndex}',
id: '{id}',
title: '{title}',
height: '{height}'
}
displayForm: function(instance, currentConfig, callback, scope) {
callback.call(scope || this, {});
}
Ext.define('MyApp.ViewPart', {
extend: 'Ext.dashboard.Part',
alias: 'part.view',
viewTemplate: {
header: false,
layout: 'fit',
items: [{
xtype: '{viewType}'
}]
},
displayForm: function (instance, currentConfig, callback, scope) {
const me = this,
title = instance ? '编辑视图类型' : '添加视图';
Ext.Msg.prompt(title, 'View type', function (btn, text) {
if (btn === 'ok') {
var config = {
viewType: text
};
callback.call(scope || me, config);
}
}, me, false, currentConfig ? currentConfig.viewType : '');
}
});
{
xtype: 'dashboard',
columnWidths:[0.3,0.7],
parts: {
widget1: {
viewTemplate: { // 一般视图配置
title: 'Widget 1',
html: 'Widget 1'
}
},
widget2: {
viewTemplate: {
title: 'Widget 2',
html: 'Widget 2'
}
},
widget3: {
viewTemplate: {
title: 'Widget 3',
html: 'Widget 3'
}
},
viewPart: { // 使用自定义的part工厂
type: 'view'
}
},
defaultContent: [{
type: 'widget1', //maps to the parts key
columnIndex: 0
}, {
type: 'widget3',
columnIndex: 0
}, {
type: 'widget2',
columnIndex: 1
}, {
type: 'viewPart', //maps to the parts key
xtype: 'myview',
columnIndex: 0
}]
}