javascript - ExtJS 和 Sencha Touch : Adding a second panel at bottom with text that depends on a function call

Question

我有 Sencha Touch 应用程序，目前看起来像 this 。顶部导航栏按预期正确显示，但我也想有一个底部栏。我还希望底部栏根据我从商店获得的值显示文本。我正在使用 Sencha Touch 2.3。我怎样才能做到这一点？

这是上述页面的 View :

Ext.define('App.view.Mod.Home', {
        extend: 'Ext.navigation.View',
        alias: 'widget.modHome',

        config: {
            navigationBar: {
                docked: 'top',
                items: [
                    {
                        text: 'Logout',
                        ui: 'back',
                        itemId: 'logoutBtn',
                        align: 'left'
                    },
                    {
                        align: 'right',
                        itemId: 'showMapBtn',
                        text: 'Show Map',
                        ui: 'action'
                    },
                    {
                        align: 'right',
                        itemId: 'modGraphBtn',
                        text: 'Stats'
                    },
                    {
                        align: 'right',
                        hidden: true,
                        itemId: 'submitBtn',
                        text: 'Submit',
                        ui: 'action'
                    },
                    {
                        xtype: 'button',
                        text: 'Role',
                        itemId: 'rolesBtnMod'
                    }
                ]
            },
            items: [
                {
                    xtype: 'list',
                    title: 'Home',
                    store: 'modList',
                    disableSelection: true,
                    itemTpl: [
                        '<div class="x-container x-field-checkbox x-field x-label-align-left x-field-labeled" style="background: none">',
                            '<div class="x-form-label" style="background: none;padding: 0">',
                                '<div>{FirstName} {LastName}</div>',
                            '</div>',
                            '<div class="x-component-outer">',
                                '<div class="x-unsized x-field-input" style="border: 0; background: none;">',
                                    '<input type="checkbox" <tpl if=\'modStatus != null && Accepted !== false\'>checked="checked"</tpl> class="x-input-el x-input-checkbox">',
                                    '<div class="x-field-mask"></div>',
                                '</div>',
                            '</div>',
                        '</div>'
                    ],
                    plugins: [{type: 'pullrefresh'}]
                },
                {
                    xtype: 'tabpanel', // <--- This is what I've tried so far, although I think that tabpanel is the wrong object to use. Panel does not work, however.
                    docked: 'bottom',
                    store: 'manageMods',
                    title: new Ext.XTemplate(
                         'tpl if="values.isActive == \'1\'">' + "{someStringValue}"
                     )
                }
            ]
        }

    });

请注意，这不是我的原始代码库，我意识到某些元素的使用不正确。重构整个代码库以遵守文档中的最新标准本身就是一项艰巨的任务，所以现在我只是试图保持风格一致。

Answer 1

首先，您的 tabpanel 声明中存在语法错误，在 title 之前缺少逗号。但是，我认为您想要实现的是 View 底部的停靠工具栏，如下所示:-

    Ext.define('App.view.Mod.Home', {
        extend: 'Ext.navigation.View',
        alias: 'widget.modHome',

        config: {
            navigationBar: {
                docked: 'top',
                items: [{
                    text: 'Logout',
                    ui: 'back',
                    itemId: 'logoutBtn',
                    align: 'left'
                }, {
                    align: 'right',
                    itemId: 'showMapBtn',
                    text: 'Show Map',
                    ui: 'action'
                }, {
                    align: 'right',
                    itemId: 'modGraphBtn',
                    text: 'Stats'
                }, {
                    align: 'right',
                    hidden: true,
                    itemId: 'submitBtn',
                    text: 'Submit',
                    ui: 'action'
                }, {
                    xtype: 'button',
                    text: 'Role',
                    itemId: 'rolesBtnMod'
                }]
            },
            items: [{
                xtype: 'list',
                title: 'Home',
                store: 'modList',
                disableSelection: true,
                itemTpl: ['<div class="x-container x-field-checkbox x-field x-label-align-left x-field-labeled" style="background: none">', '<div class="x-form-label" style="background: none;padding: 0">', '<div>{FirstName} {LastName}</div>', '</div>', '<div class="x-component-outer">', '<div class="x-unsized x-field-input" style="border: 0; background: none;">', '<input type="checkbox" <tpl if=\'modStatus != null && Accepted !== false\'>checked="checked"</tpl> class="x-input-el x-input-checkbox">', '<div class="x-field-mask"></div>', '</div>', '</div>', '</div>'],
                plugins: [{
                    type: 'pullrefresh'
                }]
            }, {
                xtype: 'toolbar', // <--- This is what I've tried so far, although I think that tabpanel is the wrong object to use. Panel does not work, however.
                docked: 'bottom',
                itemId:'myToolbar',
                title:'Test',
                //store: 'manageMods',
                //title: new Ext.XTemplate('tpl if="values.isActive == \'1\'">' + "{someStringValue}")
            }]
        }

    });

    var homeContainer = Ext.create('App.view.Mod.Home', {renderTo:Ext.getBody(), fullscreen:true});
    // Now you can get a reference to the toolbar and change it's title to whatever you want e.g.:-
    homeContainer.getComponent('myToolbar').setTitle('The 2nd test');

演示:https://fiddle.sencha.com/#fiddle/j8h