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

小编:管理员 703阅读 2022.09.07

版本

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
    }]
}
复制
关联标签: