DevExpress DXTREME使用教程：如何扩展SlideOutLayout和创建一个自定义CommandManager-控件新闻-慧都网

DevExpress DXTREME使用教程：如何扩展SlideOutLayout和创建一个自定义CommandManager

原创|使用教程|编辑：郝浩|2013-04-02 13:10:14.000|阅读 656 次

概述：如何在DXTREME ENTERPRISE中扩展 SlideOutLayout 和创建一个自定义CommandManager。这个例子演示了如何添加一个或多个列表到SlideOutLayout，同时将命令分为两组。

相关链接：

如何在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;