Ext4.1 Accordion Layout--折叠项的宽度不够答案

【问题标题】：Ext4.1 Accordion Layout--the width of accordion item is not enoughExt4.1 Accordion Layout--折叠项的宽度不够
【发布时间】：2013-02-28 08:55:43
【问题描述】：

组件第一次渲染时手风琴项很短。有什么好的想法吗？

我用的是chrome浏览器，用IE9好像没问题。

这是 jsfiddle 测试的 url：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>

【问题讨论】：

好的测试用例。我已经用小提琴尝试了一些东西，但问题仍然存在。顺便说一句，边框布局总是需要一个中心项目。

标签： extjs ext4

【解决方案1】：

使用 Ext.onready 进行渲染可以解决这个问题。(http://jsfiddle.net/xgsZ7/3/)

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

【讨论】：

-1。边框布局需要一个中心区域。此外，您的代码没有包装在 onReady 块中，您需要等到 DOM 准备好后再编写它。