Question

当组件首次渲染时，手风琴项目很短。有什么好主意吗？

我正在使用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>

Answer 1

使用Ext.onready进行渲染会解决这个问题。（http://jsfiddle.net/xgsZ7/3/）

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

Ext4.1 Accordion Layout - 手风琴项目的宽度不够

1 个答案: