2013-02-28 94 views
2

手風琴項目在組件初次渲染時很短。任何好主意?Ext4.1手風琴佈局 - 手風琴項目的寬度不夠

我使用的是Chrome瀏覽器。它似乎與IE9一致。

這是jsfiddle測試的網址:http://jsfiddle.net/xgsZ7/2/。 (也許jsfiddle測試需要更新一次才能看到問題)

這是測試代碼: 只是一個視口和一個手風琴佈局呈現的面板。

<html > 
<head> 
<title>test</title> 
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"> </script> 
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" /> 
<script language="javascript"> 
    function createAccordion() { 
     var item1 = Ext.create('Ext.Panel', { 
      title: 'Accordion Item 1', 
      html: '&lt;empty panel&gt;', 
      cls:'empty' 
     }); 

     var accordion = Ext.create('Ext.Panel', { 
      title: 'Accordion', 
      collapsible: true, 
      margins:'5 0 5 5', 
      region:'west', 
      split: true, 
      width: 210, 
      layout:'accordion', 
      items: [item1] 
     }); 
     return accordion; 
    } 

function createBody() { 
    var viewport = Ext.create('Ext.Viewport', { 
     layout:'border', 
     items:[ 
      createAccordion() 
     ] 
    }); 
} 
</script> 
</head> 
<body> 
<script>  
     createBody(); 
</script> 
</body> 
</html> 
+1

良好的測試用例。我用小提琴嘗試了一些東西,但問題仍然存在。順便說一句邊框佈局總是需要一箇中心項目。 – A1rPun 2013-02-28 09:36:12

回答

0

不要使用Ext.onready會解決這個問題渲染的東西。(http://jsfiddle.net/xgsZ7/3/

<script>  
Ext.onReady(function() { 
    createBody(); 
}); 
</script> 
+1

-1。邊界佈局需要中心區域。另外,你的代碼並沒有被封裝在onReady塊中,你需要等到DOM準備就緒後再寫入。 – 2013-02-28 10:43:40