如何在DXTREME ENTERPRISE中擴(kuò)展 SlideOutLayout 和創(chuàng)建一個(gè)自定義CommandManager。這個(gè)例子演示了如何添加一個(gè)或多個(gè)列表到SlideOutLayout，同時(shí)將命令分為兩組。

    要做的第一件事是修改的SlideOutLayout.hml的文件，并添加一個(gè)列表，你只需要?jiǎng)?chuàng)建復(fù)制現(xiàn)有的列表，然后創(chuàng)建一個(gè)用于第二個(gè)List的局部視圖的CSS規(guī)則，用于始終保持它的底部邊緣，在創(chuàng)建一個(gè)CSS規(guī)則的局部視圖，用于包含這兩個(gè)列表。

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

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

<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>

    如果修改再運(yùn)行這些應(yīng)用程序，將會(huì)看見(jiàn)包含所有命令的2個(gè)列表。這是因?yàn)槟J(rèn)的CommandMangaer不識(shí)別列表，將會(huì)把所有的命令放入這兩個(gè)列表中。接下來(lái)的一步是創(chuàng)建一個(gè)自定義的CommandManager用于繼承默認(rèn)的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
    }
});

    最后創(chuàng)建一個(gè)自定義CommandManager的示例，然后用HtmlApplication進(jìn)行注冊(cè)。

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;

慧都學(xué)院2017全新DevExpress線(xiàn)下研修班火熱報(bào)名中！