Javascript Sencha Touch 2中的显示/隐藏按钮

我是Sencha Touch的新手，我有以下方法：

    toggleProfitability: function (button) {
        var tspStatus = Ext.ComponentQuery.query('#tspstatus');
        var vbsStatus = Ext.ComponentQuery.query('#vbsstatus');
        if (tspStatus.length && vbsStatus.length > 0) {
            Ext.each(tspStatus, function (item) {
                Ext.fly(item.id).hide();
            });
            Ext.each(vbsStatus, function (item) {
                Ext.fly(item.id).hide();
            });
        }
        // close Menu
        button.up('cartMenuPanel').hide();
    },

在上面代码的底部，我正在调用

hide

方法，但我不确定以后如何再次显示隐藏字段，有人能建议一种方法吗

---

谢谢你的帮助

您应该能够检查项目的可见性状态，并在按钮处理程序中切换它们的可见性，其中定义了：

{
    xtype: 'button',
    handler: function() {
        var tspStatus = Ext.ComponentQuery.query('#tspstatus')[0];
        var vbsStatus = Ext.ComponentQuery.query('#vbsstatus')[0];

        if (tspStatus.isVisible() && vbsStatus.isVisible()) {
             tspStatus.hide();
             vbsStatus.hide();
        } else {
             tspStatus.show();
             vbsStatus.show();
        }
    },
    text: 'Show/Hide'
}

---

正如Rob在下面的commnets中所指出的，如果您希望ComponentQuery的结果返回多个组件，那么您需要使用类似的方法对结果进行迭代，并删除

[0]

在这些行的末尾。

您不能做任何事情的原因是因为您实际上隐藏了按钮的父容器

如果你可以把你的按钮放在不同的地方，那么你就可以在每次点击按钮时应用逻辑

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.create('Ext.Panel', {
            fullscreen: true,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Test Panel',
                html: 'Some html here',
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'My Toolbar'
                }]
            }, {
                xtype: 'button',
                handler: this.toggleProfitability,
                text: 'Toggle Panel'
            }]
        })

    },

    toggleProfitability: function(button) {
        /*var tspStatus = Ext.ComponentQuery.query('#tspstatus');
        var vbsStatus = Ext.ComponentQuery.query('#vbsstatus');
        if (tspStatus.length && vbsStatus.length > 0) {
            Ext.each(tspStatus, function(item) {
                Ext.fly(item.id).hide();
            });
            Ext.each(vbsStatus, function(item) {
                Ext.fly(item.id).hide();
            });
        }
        // close Menu
        button.up('cartMenuPanel').hide();*/

        // First get the target
        var myTarget = button.up('panel').child('panel');

        // Now set hidden as the opposite value of `hidden`
        myTarget.setHidden(!myTarget.getHidden());
    }
});

---

演示：

我找到了解决方案，现在它开始工作了

    toggleProfitability: function (button) {
    var listItems = Ext.ComponentQuery.query('cartItems cartItem');
    Ext.each(listItems, function (item) {
        var tsp = item.down('[name=tspstatus]');
        var vbs = item.down('[name=vbsstatus]');
        tsp.setHidden(!vbs.getHidden());
        vbs.setHidden(!vbs.getHidden());

    }, this);
    // close Menu
    button.up('cartMenuPanel').hide();
},    

---

谢谢

它对我不起作用，在我的代码中，我应该在发送事件时隐藏“vbStatus”和“tspStatus”，触发切换method@inane你的问题代码当然没有展示你刚才的评论，但在这种情况下，请看一下我上面关于@Scriptable答案的评论。“我的代码”是您如何切换元素/组件可见性的一个示例。对不起，它对我不起作用，您可以在下一条评论中看到我的解释。是的，正如@rob所说，您的隐藏项我们无法看到代码。你到底想干什么。如果您的代码显示了所有特定于此问题的代码，并解释了您需要的内容，那么就更容易提供帮助。或者更好地创建一个复制问题简单地说，我想从按钮隐藏“vbsStatus”和“tspStatus”，并在下次显示…每次都隐藏/显示。感谢您的帮助，我已更新了代码，以显示如何在的处理程序中切换这些特定项的可见性button@Scriptable你的代码不太正确，但我认为你肯定在正轨上。OP的问题不是特别清楚

Ext.ComponentQuery.query

返回一个数组，因此您必须引用第一个元素，例如

var tspStatus=Ext.ComponentQuery.query（'#tspStatus'）[0]