示例1:自定义布局

决策平台默认布局为"上-左-右"结构,如果我想自定义布局怎么办呢?比如想做成传统的圣杯布局.我们提供了 dec.provider.layout 来支持用户自定义布局,下面例子自定义了一个简单的圣杯布局,如右图所示

BI.config("dec.provider.layout", function (provider) {
    provider.setConfig(
        {
            type: "bi.border",
            items: {
                north: {
                    el: {
                        type: "bi.label",
                        cls: "bi-border",
                        text: "north"
                    },
                    height: 40
                },
                south: {
                    el: {
                        type: "bi.label",
                        cls: "bi-border",
                        text: "south"
                    },
                    height: 30
                },
                west: {
                    el: {
                        type: "bi.label",
                        cls: "bi-border",
                        text: "west"
                    },
                    width: 200
                },
                east: {
                    el: {
                        type: "bi.label",
                        cls: "bi-border",
                        text: "east"
                    },
                    width: 100
                },
                center: {
                    el: {
                        type: "bi.label",
                        cls: "bi-border",
                        text: "east"
                    }
                }
            }
        }
    );
    return provider;
});

示例2：配置一个组件

有时候平台提供的组件不能满足视觉样式或者功能需求，开发者想用自己写的组件替换掉原有的。下面例子定义了一个组件my.tree 替换掉了 dec.workbench.directory，具体组件实现可以参见

http://git.fanruan.com/fanruan/demo-theme-original/src/master/src/main/resources/com/fr/plugin/theme/original/web/js/modules.js

var MyTree = BI.inherit(BI.Widget, {
    props: {
        baseCls: "my-tree"
    },

    render: function () {
        // 略
    }
});

BI.shortcut("my.tree", MyTree);

BI.config("dec.workbench.directory", function (config) {
    config.type = "my.tree";
    return config;
});

Page tree

4.更深入的自定义

示例1:自定义布局

示例2：配置一个组件