extjs750 拖拽动态布局组件dashboard用法和样例
版本
7.5.0 classic
主要组件
Ext.dashboard.Dashboard
仪表板组件,可实现动态拖拽布局
主要配置项:
- parts 仪表板要使用的parts定义,使用键值对形式传入parts.id和psrts.config的映射
- columnWidths 仪表板分列默认列宽数组
- defaultContent 默认的项目配置.
Ext.dashboard.Part
用于创建仪表板项目的组件工厂
主要配置项:
- viewTemplate 视图模板创建仪表板项目配置的模板,模板的绑定值通过配置参数传入,也可以通过displayForm传入
默认值为:
{
collapsed: '{collapsed}',
columnIndex: '{columnIndex}',
id: '{id}',
title: '{title}',
height: '{height}'
}
- displayForm 使用dashboard.addNew时触发此函数,可以在此处处理配置参数,或通过弹窗等方式让用户输入额外的配置参数
默认值为:
displayForm: function(instance, currentConfig, callback, scope) {
callback.call(scope || this, {});
}
样例
- ViewPart 根据viewType配置项嵌入其他应用视图或组件
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 : '');
}
});
- Dashboard
{
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
}]
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
2020-04-11 spring 启动时自动运行
2020-04-11 spring cloud oauth2授权服务 默认tokenService配置源码
2020-04-11 spring cloud 搭建oauth2授权服务 使用redis存储令牌
2020-04-11 spring cloud oauth2授权服务 clientDetails配置源码
2020-04-11 spring 验证框架
2020-04-11 IDEA 插件整理
2020-04-11 spring security笔记 默认登陆页面源码