0
我已成功實施this滑動導航庫。Sencha Touch 2按鈕啓用滑動導航
我可以將主視口滑入和滑出來顯示和隱藏視口左側的導航。
但是，我有點新手，無法找到隱藏和顯示通過按鈕點擊導航的方式。我會很感激任何方向來幫助我將現有的幻燈片導航配合到按鈕點擊操作中。
UPDATE：
我嘗試定製欄添加到Main.js是在一個名爲CustomBar類擴展標題欄的問題。然後我通過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'
}
);
}
});
再次感謝你馬丁。我會盡快研究這個 – sisko
嗨馬丁。請原諒我的無知，但我不明白您的示例代碼將如何幫助解決我的問題。所以，我用代碼更新了我的問題，這應該有助於更好地解釋一些事情 - 如果你能讓我更多地享受你的時間。 – sisko
馬丁，非常感謝。我檢查了你對我的代碼的調整，這一切都很有意義，我將我的部分視圖添加到Main.js.然而，你之前的一個問題讓我重新浮出水面。我指的是LIST項目詳細信息視圖中的雙重工具欄。我在更新＃2中添加了信息 – sisko