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

                小編:管理員 234閱讀 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
                    }]
                }
                復制
                關聯標簽:
                喵视频,国偷自产一区二视频观看,国产三级视频在线观看,国产精品免费久久久久电影,老师你下面太紧了拔不出来,国产成人亚洲欧美综合无码,亚洲日本VA中文字幕久久