extjs750 拖拽动态布局组件dashboard用法和样例

版本

7.5.0 classic

主要组件

Ext.dashboard.Dashboard

仪表板组件,可实现动态拖拽布局
主要配置项:

  1. parts 仪表板要使用的parts定义,使用键值对形式传入parts.id和psrts.config的映射
  2. columnWidths 仪表板分列默认列宽数组
  3. defaultContent 默认的项目配置.

Ext.dashboard.Part

用于创建仪表板项目的组件工厂
主要配置项:

  1. viewTemplate 视图模板创建仪表板项目配置的模板,模板的绑定值通过配置参数传入,也可以通过displayForm传入
    默认值为:
{
    collapsed: '{collapsed}',
    columnIndex: '{columnIndex}',
    id: '{id}',
    title: '{title}',
    height: '{height}'
}
  1. 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
    }]
}

posted on   路过君  阅读(193)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 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笔记 默认登陆页面源码

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示