extjs750 拖拽動態布局組件dashboard用法和樣例

7.5.0 classic

儀表板組件,可實現動態拖拽布局 主要配置項：

1. parts 儀表板要使用的parts定義，使用鍵值對形式傳入parts.id和psrts.config的映射
2. columnWidths 儀表板分列默認列寬數組
3. defaultContent 默認的項目配置.

用于創建儀表板項目的組件工廠 主要配置項：

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