slide in和slide Out减小了组件的宽度

时间:2012-03-26 14:54:25

标签: css extjs

有人可以帮我解决在SlideIn或SlideOut期间减小组件宽度的问题吗?我使用的是Ext JS 4.1版RC1。

Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0',
            items: [{
                xtype: 'container',
                id: 'con_notification-box',
                cls: 'notification-box',
                hidden: true,
                border: true,
                width: 500,
                height: 0,
                style: {
                    position: 'fixed',
                    minHeight: '75px !important',
                    left: '50%',
                    marginLeft: '-250px',
                    zIndex: '999999',
                    backgroundColor: 'white'
                },
                items:[{
                    xtype: 'container',
                    html: '<p>Insert your information text here.</p>'
                },{
                    xtype: 'container',
                    id: 'con_application-close',
                    cls:   'notification-close',
                    html: '<br />Close'
                }]
            },{
                xtype: 'container',
                html: '<h1 class="x-panel-header">Your title</h1>'
            }]
        }]
    });
    var con_notification_box = Ext.getCmp('con_notification-box').getEl();

    con_notification_box.slideIn('t', {
        easing: 'easeOut',
        duration: 500
    });

    Ext.getCmp('con_application-close').getEl().on('click',function(){
        con_notification_box.slideOut('t', { duration: 2000 });
    });
});

如果你能帮助我,我将非常感激。

亲切的问候,shub

1 个答案:

答案 0 :(得分:1)

你的问题不是很清楚你要做什么。但你发布的代码不起作用。我让它滑入和滑出,但不确定这是不是你的意思: http://jsfiddle.net/dbrin/qDhXg/

您需要将面板标记为中心或用fit替换边框布局(请参阅jsfiddle)