【发布时间】：2018-04-05 03:02:30
【问题描述】：
我已经成功实现this幻灯片导航库。我可以将主视口滑入和滑出以显示和隐藏视口左侧的导航。
但是，我无法通过单击按钮找到隐藏和显示导航的方法。如何将现有的幻灯片导航绑定到按钮单击操作？
更新：
我尝试向 Main.js 添加自定义栏是在名为 CustomBar 的类中扩展 TitleBar。然后我通过 Main.js 中的 xtype 使用它。下面的代码显示了我的 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'
},
]
}
});
我的customBar.js代码如下：
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
// name: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
这个 customBar 代码被 Views 静态使用。我的 LIST 组件使用不同的解决方案来获取 NavigationBar 并向其添加组件以生成与 CustomBar 相似的外观栏。
我需要将来自 CustomBar.js 的预先存在的 LIST 图标按钮与幻灯片导航功能建立联系 - 这样我就可以拖动或单击图标来显示/隐藏导航菜单。
更新#2
按照您在下面的更新和我的previous 问题中的指示，我实施的将我的 LIST 后退按钮放置在与我的自定义导航相同的工具栏中的解决方案不再有效。下图显示了我的结果：
我已经成功地使用以下代码来检测消息和部分列表视图，获取导航栏并将我的图标放入栏中。 我的想法是在列表图标上使用监听器来显示/隐藏菜单。但是，由于没有监听器，只有 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'
}
);
}
});
【问题讨论】：
标签： button navigation sencha-touch-2 slide