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

我遇到了以下情况：一些控件位于按钮旁边，在单击按钮时可以滑入和滑出

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

最初显示控件时，代码工作正常。问题是：如果我想让它们最初隐藏起来，我该怎么办<代码>隐藏：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);
}