Button Sencha Touch 2按钮启用幻灯片导航

我已经成功地实现了幻灯片导航库。我可以滑入和滑出主视口，以显示和隐藏视口左侧的导航

但是，我找不到一种通过单击按钮隐藏和显示导航的方法。如何将现有幻灯片导航绑定到按钮单击操作中

更新：

我试图在Main.js中添加一个自定义条，这是在一个名为CustomBar的类中扩展标题栏的问题。然后我通过Main.js中的xtype使用它。下面的代码显示了my Main.js代码以及幻灯片导航库的配置：

    Ext.define('RT.view.Main', {
    extend: 'Ext.ux.slidenavigation.View',
    xtype: 'main',

    requires: [
        'Ext.TitleBar',
        // 'Ext.Video'
    ],

    config: {

        fullscreen: true,
        // slideSelector: 'x-toolbar',
        slideSelector: '',
        containerSlideDelay: 10,
        selectSlideDuration: 200,
        itemMask: true,
        /*slideButtonDefaults: {
            selector: 'toolbar'
        },*/
        listPosition: 'left',
        list: {
            maxDrag: 300,
            width: 200,
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light',
                    title: {
                        title: 'Menu',
                        centered: false,
                        width: 200,
                        left: 0,
                    },
                    items: [{
                        docked: 'top',
                        xtype: 'searchfield',
                        placeHolder: 'search',
                        width: 180
                    }]
                }
            ]
        },
        slideButton: true,
        slideButton: {
            selector: 'toolbar'
        },

        defaults: {
            style: 'background: red',
            xtype: 'container',
        },
/****************************************************/

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'custombar',
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Messages',
                xtype: 'messages',
                iconCls: 'user',
            },
            {
                title: 'Sections',
                xtype: 'sections'
            },
            {
                title: 'submenu#1',
                html: 'submenu#1',
                group: 'Group 2',
            },
            {
                title: 'submenu#2',
                html: 'submenu#2'
            },
            {
                title: 'submenu#3',
                html: 'submenu#3'
            },
        ]
    }
});

此自定义条形码由视图静态使用。My LIST components使用不同的解决方案来获取导航栏并向其中添加组件，以生成与CustomBar相似的外观栏

我需要在CustomBar.js中预先存在的列表图标按钮与幻灯片导航功能之间建立连接，这样我就可以拖动或单击图标来显示/隐藏导航菜单

更新#2

在下面的更新和我的问题中，按照您的指示，我实现的将列表返回按钮放置到自定义导航的同一工具栏中的解决方案不再有效。下图显示了我的结果：

我已经成功地使用下面的代码来检测消息和部分列表视图，获取导航栏并将我的图标放置到该栏中我的想法是使用列表图标上的侦听器来显示/隐藏菜单。但是，由于没有侦听器，只有slideButton配置，我的代码是多余的：

Ext.define('RT.controller.BarGenerator', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            messagesView: 'messages',
            sectionsView: 'sections'
        },
        control: {
            'sections': {
                initialize: 'generateBarSections'
            },
            'messages': {
                initialize: 'generateBarMessages'
            },
        }
    },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    },
    generateBarSections: function(list, record){
        console.log('LOADING ICONS AND CUSTOMIZING BAR!');
        navigationview = this.getSectionsView().getNavigationBar();
        navigationview.add(
            {
                // name: 'BTNslidenav',
                id: 'BTNslidenav',
                iconMask: true,
                iconCls: 'list',
                ui: 'plain',
            },
            {
                id: 'BTNuser',
                iconMask: true,
                iconCls: 'user',
                ui: 'plain',
                align: 'right'
            }
        );
    },
    generateBarMessages: function(list, record){
        console.log('LOADING ICONS AND CUSTOMIZING BAR!');
        navigationview = this.getMessagesView().getNavigationBar();
        navigationview.add(
            {
                slideButton: {
                    selector: "custombar"
                },
                // name: 'BTNslidenav',
                id: 'BTNslidenav',
                iconMask: true,
                iconCls: 'list',
                ui: 'plain',
            },
            {
                id: 'BTNuser',
                iconMask: true,
                iconCls: 'user',
                ui: 'plain',
                align: 'right'
            }
        );
    }
});

---

Ext.ux.slidenavigation.View带有滑动按钮功能。 您只需要指定按钮的位置

您可以使用容器填充Ext.ux.slidenaviagtion.View的items数组。这些容器有一个属性

slideButton

，您可以在其中定义一个选择器，用于查找按钮应插入的组件

items : [
    {
        xtype : 'container',
        group : 'my first group',
        slideButton :
        {
            selector : 'toolbar'
        },
        items :
        [
            {
                xtype : 'toolbar',
                itemId : 'start_toolbar',
                title : 'first view',
                docked : 'top'
            },
            {
                xtype : 'start'
            }
        ]
    },
    {
        xtype : 'container',
        group : 'my first group',
        slideButton :
        {
            selector : 'toolbar'
        },
        items :
        [
            {
                xtype : 'toolbar',
                title : 'second view',
                docked : 'top'
            },
            {
                xtype : 'anotherview'
            }
        ]
    }
]

在本例中，Ext.ux.slidenavigation.View的items数组包含2个容器。容器始终包含两个组件。工具栏和我要显示的实际视图。

slideButton

config属性定义将按钮插入到具有xtype工具栏的组件中

更新：

感谢您提供了一些代码。我已经重新整理了你的代码，因此它符合我的示例

Ext.define('RT.view.CustomBar',{
        extend: 'Ext.TitleBar',
        xtype: 'custombar',

        config:{

            title: 'TESTING ...',
            items: [
                {
                    iconMask: true,
                    // iconCls: 'user',
                    iconCls: 'star',
                    ui: 'plain',
                    align: 'right'
                }
            ]

        }// config
    });

首先，我已经从custombar中删除了您的按钮。幻灯片导航将为您创建按钮

Ext.define('RT.view.Main', {
    extend: 'Ext.ux.slidenavigation.View',
    xtype: 'main',

    requires: [
        'Ext.TitleBar'
    ],

    config: {
        fullscreen: true,
        containerSlideDelay: 10,
        selectSlideDuration: 200,
        itemMask: true,
        listPosition: 'left',
        list: {
            maxDrag: 300,
            width: 200,
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'light',
                    title: {
                        title: 'Menu',
                        centered: false,
                        width: 200,
                        left: 0,
                    },
                    items: [{
                        docked: 'top',
                        xtype: 'searchfield',
                        placeHolder: 'search',
                        width: 180
                    }]
                }
            ]
        },
        slideButton: true,


/****************************************************/
        slideButtonDefaults: {
            iconMask: true,
            iconCls: 'list',
            ui: 'plain'
        },
        items: [
            {
                xtype: "container",
                group: "first group",
                title: 'Welcome',
                iconCls: 'home',
                slideButton: {
                    selector:"custombar"
                },
                items: [
                    {
                            docked: 'top',
                            xtype: 'custombar',
                    },
                    {
                        styleHtmlContent: true,
                        scrollable: true,
                        html: [
                            "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                            "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                            "and refresh to change what's rendered here."
                        ].join("")
                    }
                ]
            },
            {
                xtype: "container",
                group: "first group", 
                title: 'Messages',
                iconCls: 'user',
                slideButton: {
                    selector: "custombar"
                },
                items: [
                    {
                            docked: 'top',
                            xtype: 'custombar',
                    },
                        {
                        xtype: 'messages'
                        }
                ]
            }
        ]
    }
});

就这样

更新#2

这是因为您现在有多个工具栏。测试工具栏插入到幻灯片导航将显示的每个容器中。另一个工具栏来自导航视图，该视图位于幻灯片导航容器内

下面是一些“修复”它的方法

首先，当导航视图工具栏处于活动状态且显示导航视图中的第一个视图时，可以隐藏该工具栏。重要的是，此视图是一个永远不会有逻辑前置的视图。因此，永远没有任何理由在该级别设置后退按钮。当您开始在导航视图中导航并向其中推送越来越多的视图时，您可以隐藏“测试”工具栏。问题是：在每个子视图中都有滑动按钮是很重要的，还是只在俯视图中有滑动按钮就足够了。考虑一下这一点：工具栏中的许多按钮相当多，可能会迷惑用户。仍然可以通过滑动打开幻灯片导航

或者根本不使用自定义栏，而是自定义导航视图的标题栏。幻灯片导航的项目数组如下所示：

items: [
            {
                xtype: "container",
                group: "first group",
                title: 'Welcome',
                iconCls: 'home',
                slideButton: {
                    selector:"titlebar"
                },
                items: [
                    {
                        xtype: "navview"
                    }
                ]
            },
            {
                xtype: "container",
                group: "first group", 
                title: 'Messages',
                iconCls: 'user',
                slideButton: {
                    selector: "tilebar"
                },
                items: [
                    {
                        xtype: 'navView2'
                    }
                ]
            }
        ]

---

但是，当您开始按视图时，请注意导航标题栏（停靠在左侧）中有两个按钮

再次感谢你，马丁。我会调查这个阿萨菲·马丁。请原谅我的无知，但我无法理解您的示例代码将如何帮助解决我的问题。所以，我用代码更新了我的问题，这应该有助于更好地解释问题——如果你能抽出更多时间的话。马丁，非常感谢你。我检查了您对我的代码所做的调整，这一切都是有意义的，我将我的sections视图添加到Main.js中。然而，你帮助我解决的前一个问题重新浮出水面。我指的是列表项详细信息视图中的双工具栏。我在“更新”下添加了有关您的PS问题的信息：我从开始。这是一个很好的入门教程。我经常咨询sencha医生，尽管他们非常糟糕，有时甚至是错误的。但那是开始阅读他们代码的好时机。有时候你不得不这么做……所以基本上我经历了很多尝试和错误；）

slideButton: {
  selector: 'custombar'
}

items: [
            {
                xtype: "container",
                group: "first group",
                title: 'Welcome',
                iconCls: 'home',
                slideButton: {
                    selector:"titlebar"
                },
                items: [
                    {
                        xtype: "navview"
                    }
                ]
            },
            {
                xtype: "container",
                group: "first group", 
                title: 'Messages',
                iconCls: 'user',
                slideButton: {
                    selector: "tilebar"
                },
                items: [
                    {
                        xtype: 'navView2'
                    }
                ]
            }
        ]