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在commnets中看到的那样，如果您希望ComponentQuery的结果返回多个组件，您需要使用类似Ext.each的内容迭代结果并删除[0] at这些线的结尾。

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

谢谢！

在Sencha Touch 2中显示/隐藏按钮

3 个答案: