2012-03-26 67 views
1

有人可以幫助我解決在SlideIn或SlideOut期間減少組件寬度的問題嗎?我正在使用Ext JS版本4.1 RC1。slideIn和slideOut減少組件的寬度

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

你的問題是不是爲你正在嘗試做的非常清楚。但是你發佈的代碼無法正常工作。我知道了進出滑動,但不知道這是你如何意味着它是: http://jsfiddle.net/dbrin/qDhXg/

您需要將其標記爲您的面板爲中心或以適合更換邊框佈局(見的jsfiddle)

+0

感謝您的回答。但我希望我的「通知面板」將中心對齊。 – shub 2012-03-27 06:02:07

+1

沒有中心定位。您可以使用錨點佈局來指定50%的偏移量,或者我已經在某處看到用於中心佈局的用戶擴展。 – dbrin 2012-03-27 06:19:55

+0

你是否也知道,我如何在錨佈局中設置50%的偏移量? – shub 2012-03-27 09:26:06