Sencha Touch 2 厨房水槽像导航

Posted 2023-02-26

【中文标题】Sencha Touch 2 厨房水槽像导航

【英文标题】：Sencha Touch 2 kitchen sink like navigation

【发布时间】：2012-03-20 13:11:08

【问题描述】：

我已经为此进行了广泛而遥远的搜索，但我似乎没有找到任何有关如何执行此操作的线索。 煎茶在其厨房水槽中的巧妙之处如下：

导航栏停靠在左侧 工具栏停靠在顶部，显示视图的标题。

而且我似乎无法弄清楚如何做到这一点，即使吐槽了 Kitchen Sink 的源代码。我确实找到了一些关于如何做的痕迹，但这并不完整。

showViewById: function(id) 
    var nav = this.getNav(),
        view = nav.getStore().getNodeById(id);

    this.showView(view);
    this.setCurrentDemo(view);
    this.hideSheets();
,

这还不是全部。

你能给我一些关于如何创建这种类型布局的教程吗？或者进一步帮助我？

【问题讨论】：

您是否在问如何在不实际使用的情况下创建一个看起来像 Sencha Touch 的页面？这就是我想要弄清楚的，这就是我解释你的问题的方式，但你接受的答案似乎表明我可能错了。

@Michael 如果您查看 Sencha Touch cdn.sencha.io/touch/sencha-touch-2.1.0/examples/kitchensink 的 Kitchensink，您会看到它具有的特殊导航。我想在 Sencha Touch 2 中也一样

【参考方案1】：

查看 Main.js 文件 (Kitchensink.view.tablet.Main)。这个类基本上创建了你正在谈论的布局。它很简单：

items: [
           // This is the content area... 
        id: 'launchscreen',
        cls : 'card',
        scrollable: true,
        html: 'Home page content'
    ,
     
        // The left navigation
        id: 'mainNestedList',
        xtype : 'nestedlist',
        useTitleAsBackText: false,
        docked: 'left',
        width : 250,
        store: 'Demos'
    ,
    
        // The top toolbar
        id: 'mainNavigationBar',
        xtype : 'titlebar',
        docked: 'top',
        title : 'Kitchen Sink',
        items: 
            xtype : 'button',
            id: 'viewSourceButton',
            hidden: true,
            align : 'right',
            ui    : 'action',
            action: 'viewSource',
            text  : 'Source'
        
    
]

这应该可以帮助您入门。

【讨论】：

谢谢，这给了我想要的顺序 :)，我可以在启动屏幕中切换视图，从而获得我想要的功能。