FitLayout
При использовании компоновки FitLayout внутренний элемент растягивается до границ родительского контейнера.
Например, разместим в панели внутреннюю панель, используя этот вариант компоновки:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" >
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script>
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 300,
height: 230,
padding:10,
title: 'Основной контейнер',
layout: 'fit',
items: {
title: 'Внутренняя панель',
html: 'Внутренняя панель при Fit Layout',
padding: 2,
border: true
}
});
});
</script>
</head>
<body></body>
</html>
Свойство layout: 'fit' в данном случае показывает, что используется компоновка FitLayout и что внутренний элемент будет заполнять все
содержимое родительского контейнера.
FitLayout имеет значение только для первого дочернего элемента. Если бы у нас было бы две внутренних панели, как в прошлом разделе, то первая панель бы была растянута до границ контейнера, а вторую просто не было бы видно.