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

路过君

发布于 2022-04-13 13:34:10

6420

文章被收录于专栏：路过君BLOG from CSDN路过君BLOG from CSDN

版本

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
    }]
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/01/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

config