2013-02-28 5 views
2

Аккордеонный элемент является коротким, когда компонент сначала визуализируется. Хорошие идеи?Ext4.1 Accordion Layout - ширина элемента аккордеона не достаточно

Я использую браузер Chrome. Кажется, что с IE9 все в порядке.

Это URL-адрес теста 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

ответ

0

ли вынести вещи с помощью Ext.onReady решит эту проблему. (http://jsfiddle.net/xgsZ7/3/)

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

-1. Для макета границы требуется центральная область. Кроме того, ваш код не завернут в блок onReady, вам нужно подождать, пока DOM не будет готов, прежде чем писать. –