Sencha Touch 2按钮启用幻灯片导航
我已成功实施了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代码。我的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'
}
);
}
});
1 个答案:
答案 0 :(得分：0)
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
});
首先，我已从您的自定义栏中删除了您的按钮。幻灯片导航将为您创建按钮。
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'
}
]
}
]
}
});
由于幻灯片导航会为您创建幻灯片按钮，因此您可以使用slideButtonDefaults进行自定义。
幻灯片导航的项目数组是重要的部分。 它现在包含两个容器。这意味着你在侧面导航中得到两个条目。这些容器中的每一个都包含您的自定义栏以及在侧面导航中点击条目时您实际想要显示的视图。
每个包装容器定义滑动按钮将放置在其子视图中的位置。
完成了slideButton: {
selector: 'custombar'
}
就是这样。
<强>更新＃2
这是因为您现在有多个工具栏。测试工具栏将插入到幻灯片导航将显示的每个容器中。另一个工具栏来自导航视图，该视图托管在幻灯片导航容器中。
有一些方法可以解决问题。它。
首先，您可以在导航视图工具栏处于活动状态时隐藏它，并显示导航视图中的第一个视图。重要的是，这个视图是一个永远不会有逻辑前身的视图。因此，永远不会有任何理由在该级别上设置后退按钮。当您开始在导航视图中导航并向其推送越来越多的视图时，您可以隐藏测试＆＃39; - 工具栏。问题是：在每个子视图中都有滑动按钮是否很重要，或者仅在顶视图上使用滑动按钮是否合适。考虑一下：工具栏中的许多按钮非常多，可能会让用户感到困惑。通过滑动仍然可以打开幻灯片导航。
或者您根本不使用自定义栏，而是自定义导航视图的标题栏。幻灯片导航的items数组如下所示：
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'
}
]
}
]
但是当您开始推送视图时，请注意导航标题栏中有两个按钮（停靠在左侧）。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？