Ext4.1手风琴布局 - 手风琴项目的宽度不够

问题描述：

手风琴项目在组件初次渲染时很短。任何好主意？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>

良好的测试用例。我用小提琴尝试了一些东西，但问题仍然存在。顺便说一句边框布局总是需要一个中心项目。 – A1rPun 2013-02-28 09:36:12

答

不要使用Ext.onready会解决这个问题渲染的东西。（http://jsfiddle.net/xgsZ7/3/）

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

-1。边界布局需要中心区域。另外，你的代码并没有被封装在onReady块中，你需要等到DOM准备就绪后再写入。 – 2013-02-28 10:43:40

Ext4.1手风琴布局 - 手风琴项目的宽度不够

相关推荐