Question

我遇到以下情况：某些控件位于按钮旁边，并且在按钮点击时滑入和滑出。

Ext.define ('Site.widget.SomeButton', {
    extend: 'Ext.button.Button',
    xtype: 'SomeButton',
    width: 30,
    controlled_inputs: null,
    expanded: false,
    setControlledCmp: function(controlledInputs) {
        var me = this;
        me.on('click', function(){
            if (me.expanded)
                controlledInputs.getEl().slideOut('r', { duration: 250 });
            else
                controlledInputs.getEl().slideIn('r', { duration: 250 });
            me.expanded = !me.expanded;
        }); 
    }
});

Ext.define('Site.widget.ComingOut', {
    extend: 'Ext.Container',
    xtype: 'ComingOut',
    layout: 'hbox',
    header: false,    
    referenceHolder: true,    
    items:[{
        xtype: 'SomeItems',
        reference: 'SomeItems'
    },{
        xtype: 'SomeButton',
        reference: 'SomeButton'
    }],

    onBoxReady: function() {
        me.lookupReference('SomeButton').setControlledItems(me.lookupReference('SomeItems'));
    }
});

最初显示控件时，代码工作正常。问题是：如果我想让它们最初被隐藏，我该怎么办？ hidden:false不是选项，因为当隐藏控件时，按钮会移动到释放位置。我想我在这里很容易丢失一些东西。提前谢谢！

PS我找到了解决方案，虽然它看起来不够好（隐藏元素而不是正确设置其初始状态），所以如果有人知道更好的一个 - 欢迎你。我的解决方案如下

setControlledCmp: function(controlled_inputs) {
    var me = this;
    me.on('click', function( view, eOpts ){
        controlled_inputs.setOpacity(1);
        if (me.expanded)
            controlled_inputs.slideOut('r', { duration: 250 });
        else
            controlled_inputs.slideIn('r', { duration: 250 });
        me.expanded = !me.expanded;
    }); 
}

和

onBoxReady: function() {
    var me = this;
    var inputs = me.lookupReference('search_inputs').getEl();
    inputs.setOpacity(0);
    inputs.slideOut('r', { duration: 5 });
    me.lookupReference('search_button').setControlledCmp(inputs);
}

如何在ExtJS中滑动隐藏组件？

0 个答案: