Show/hide Sencha Touch 2 中的按钮

Question

我是 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 方法，但我不确定之后如何再次显示隐藏字段，有人可以建议一种方法吗？

感谢您的帮助！！

Answer 1

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

{
    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 在下面的 commnet 中发现的那样，如果您希望 ComponentQuery 的结果为 return 多个组件，您需要使用类似 Ext.each 的方法迭代结果并删除[0] 在这些行的末尾。

Answer 2

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

如果您可以将按钮放在不同的位置，那么您就可以在每次单击按钮时应用逻辑。

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());
    }
});

演示：https://fiddle.sencha.com/#fiddle/gbh

Answer 3

我找到了解决方案，现在可以使用了...

    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();
},

谢谢！

Show/hide Sencha Touch 2 中的按钮

Show/hide button in Sencha Touch 2

javascript

extjs

sencha-touch