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

                    小編:管理員 669閱讀 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
                        }]
                    }
                    復制
                    關聯標簽:
                    无码精品人妻一区二区三区软件