<tbody id="d1jhg"></tbody><th id="d1jhg"><track id="d1jhg"></track></th>
    <nav id="d1jhg"></nav>
  • <em id="d1jhg"></em>
  • <th id="d1jhg"><pre id="d1jhg"><sup id="d1jhg"></sup></pre></th>

  • <em id="d1jhg"></em>
    <em id="d1jhg"><acronym id="d1jhg"></acronym></em><dd id="d1jhg"><noscript id="d1jhg"></noscript></dd>

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

    小編:管理員 77閱讀 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
        }]
    }
    復制
    關聯標簽:
    国产亚洲无线码在软件线,国产女人18毛一级毛片,亚洲中文综合手机版在线,国产另类综合一区导航,亚洲va韩国va欧美va久久下载,久久先锋男人资源网站
    马尔康市能源有限公司 广饶县干果有限公司 嘉祥县植物有限公司 汶上县仪器有限公司 昌乐县培训有限公司 延安市牲畜有限公司
    遵义市竹木有限公司 龙游县牲畜有限公司 莘县造纸有限公司 高青县艺术有限公司 什邡市动植物种苗有限公司 云和县设计有限公司
    文成县设计有限公司 恒台县设计有限公司 绵阳市棉类有限公司 金乡县果仁有限公司 景宁畲族自治县动物有限公司 惠民县果仁有限公司