如何在DXTREME ENTERPRISE中擴展 SlideOutLayout 和創建一個自定義CommandManager。這個例子演示了如何添加一個或多個列表到SlideOutLayout，同時將命令分為兩組。

    要做的第一件事是修改的SlideOutLayout.hml的文件，并添加一個列表，你只需要創建復制現有的列表，然后創建一個用于第二個List的局部視圖的CSS規則，用于始終保持它的底部邊緣，在創建一個CSS規則的局部視圖，用于包含這兩個列表。

.layout-list-bottom {
    position: absolute;
    bottom: 0;
    height: auto;
    width: 100%;
}
.nav-list {
    height: 100%;
}

    將上面的代碼插入到NavBarLayout.css文件，此外添加自定義的“data-bottom”屬性到下面的列表，自定義CommandManager將使用這個屬性來識別列表，經修改的局部視圖的代碼如下所示：

<div class="nav-patrial-view" data-dx-role="view" data-dx-name="nav-list" class="nav-list">
    <div data-bind="dxList: { }" data-dx-command-container="navigation: { }" style="height: 100%">
        <div data-dx-role="template" data-dx-name="item" data-bind="visible: visible, css: { 'dx-state-disabled': disabled }">
            <div data-bind="click: click" >
                <!-- ko if: icon -->
                <span  data-bind="attr:{ 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc}"/>
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
    <div data-bind="dxList: { }" data-dx-command-container="navigation: { }" class="layout-list-bottom" data-bottom="true">
        <div data-dx-role="template" data-dx-name="item" data-bind="visible: visible, css: { 'dx-state-disabled': disabled }">
            <div data-bind="click: click" >
                <!-- ko if: icon -->
                <span  data-bind="attr:{ 'class': 'dx-icon dx-icon-' + icon }"></span>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <img class="dx-icon" data-bind="attr: { src: iconSrc}"/>
                <!-- /ko -->
                <div class="dx-navigation-item" data-bind="text: title"></div>
            </div>
        </div>
    </div>
</div>

    如果修改再運行這些應用程序，將會看見包含所有命令的2個列表。這是因為默認的CommandMangaer不識別列表，將會把所有的命令放入這兩個列表中。接下來的一步是創建一個自定義的CommandManager用于繼承默認的CommandManager，覆蓋覆蓋其_mapCommands方法。代碼如下：

var CustomCommandManager = DevExpress.framework.html.CommandManager.inherit({
    ctor: function(options) {
        this.callBase(options);
        this.bottomCommands = options.bottomCommands || {};
    },

    _mapCommands: function ($markup, commands) {
        var result = [];
        var self = this;
        $markup.find("*[data-dx-command-container]").each(function () {
            var $commandContainer = $(this);
            var optionsJsonString = $commandContainer.data("dx-command-container");
            var options = new Function("return {" + optionsJsonString + "}")();
            var mapping = {
                $container: $commandContainer,
                commands: [],
                options: options
            };
            result.push(mapping);
            $.each(options, function (location, locationOptions) {
                $.each(commands, function (index, command) {
                    if (command && command.option("location") === location) {
                        if (location != 'navigation' || !($commandContainer.data('bottom') ^
                            self.bottomCommands[command.option('action').slice(1)]))
                            mapping.commands.push(command);
                    }
                })
            })
        });
        return result
    }
});

    最后創建一個自定義CommandManager的示例，然后用HtmlApplication進行注冊。

var commandManager = new CustomCommandManager({
    bottomCommands: {
        About: true
    }
});
DxSample.app = new DevExpress.framework.html.HtmlApplication({
    ns: DxSample,
    viewPortNode: document.getElementById("view-port"),
    defaultLayout: DxSample.config.defaultLayout,
    navigation: DxSample.config.navigation,
    commandManager: commandManager
});
commandManager.globalCommands = DxSample.app.navigation;

慧都學院2017全新DevExpress線下研修班火熱報名中！