Question

我正在使用sencha本身提供的citybars示例应用程序来学习sencha touch和extjs。

这是链接 http://docs.sencha.com/architect/3/tutorials/first_mobile_application.html

此应用程序非常适合学习目的，现在我想创建一个演示应用程序，其中我有以下内容：

有一个mainview包含静态/固定标头（名称view1）。
主视图包含另一个视图，假设view2是可变的或可以更改。

问题

如何实现view2动态更改的此功能？

Sample Image

Answer 1

我可以指导你想要实现的目标。

如果您需要幻灯片导航，请先尝试this。我正在为您提供示例代码，以便您了解所需的布局。试试这个观点：

Ext.define('Sample.view.Main', {
        extend: 'Ext.Container',
        xtype: 'main',
        requires: [
        'Ext.dataview.List'
        ],
        config: {
          layout: 'hbox',
          cls: 'main',
          items: [{
            xtype: 'list',
            itemTpl: '{title}',
            data: [{ title: 'Red', val: 'red' },
            { title: 'Blue', val: 'blue' },
            { title: 'Orange', val: 'orange' },
            { title: 'Purple', val: 'purple' }],
            flex: 1,
            listeners: {

                itemtap: function(el, index, target, record, e) {
                    var me = this,
                    element = Ext.get(e.target),
                    main = element.parent('.main'), //assign the dom of 'Main' view to 'main'
                    newCls = record.get('val');

                    if(me.lastAddedCls) {
                        main.removeCls(me.lastAddedCls).addCls(newCls);
                    } else {
                        main.addCls(newCls);
                    }

                    me.lastAddedCls = newCls; // Keeps track of last added view so that it can be further removed
                }
            }
        }, {
            cls: 'viewTwo',
            flex: 2
        }]
    }
});

这里假设第一部分是导航面板，第二部分是您想要的变量视图2 。您现在可以在css文件中添加一些样式（比如style.css）

.main.red {
    background-color: red;
}
.main.blue {
    background-color: blue;
}
.main.purple {
    background-color: purple;
}
.main.orange {
    background-color: orange;
}

注意：不要忘记在bootstrap.json和app.json文件中添加此css文件。

我通过改变背景颜色来展示这个例子。您可以尝试在此处添加和删除视图。

随意询问任何问题。

Answer 2

您可以使用带有停靠顶部工具栏的TabPanel。 TabPanel底栏将允许您的用户在您的应用中的视图之间导航。

一个非常简单的例子，您可以为自己使用构建：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'My title'
        },
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

这些项目只是您在Architect中创建的自己的视图：

items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'My title'
            },
            {
                xtype: 'mylistview',
                iconCls: 'home'
            },
            {
                xtype: 'mymapview',
                iconCls: 'map'
            }
        ]

在这里阅读更多内容=＆gt; http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.tab.Panel

在主视图Sencha Touch 2.4中更改子视图

2 个答案: