Я пытаюсь заставить макет выглядеть так:
(источник: yfrog.com )
У меня было много веселья, пытаясь заставить это работать. Наконец-то я получил что-то, что почти работает, но только потому, что я опустил бета-версию Ext JS 3.2.
У меня осталась одна последняя проблема. Приведенный ниже код будет отображать панели почти правильно, однако правая панель не растягивается, чтобы заполнить правую половину контейнера.
Если я добавлю конфигурацию макета (показанную в закомментированном коде) и удалю атрибут макета, то я получу все три панели, расположенные вертикально, а не две панели hbox, растянутые для заполнения пространства и панели vbox быть друг над другом.
Я был бы очень признателен, если бы кто-то посмотрел на приведенный ниже код и указал, что мне не хватает или если я столкнулся с ошибкой в ExtJS 3.2b.
Спасибо
Стивен
<html>
<head>
<script src="/script/ext/adapter/ext/ext-base-debug.js"></script>
<script src="/script/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/script/ext/resources/images/default/s.gif';
</script>
<script type="text/javascript">
Ext.onReady(function() {
var detailPanel = {
id : 'detail-panel',
contentEl : 'pageDetail',
title : 'Detail Panel'
};
var workflowPanel = {
id : 'workflowpanel',
title : 'Page Status',
contentEl : 'pageWorkflow'
};
var accessPanel = {
id : 'accesspanel',
title : 'Page Access',
contentEl: 'pageAccess'
};
var extraPanel = {
title : 'extra panel',
layoutConfig : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
defaults : {
flex : 1,
frame : true
},
items : [workflowPanel,accessPanel]
};
var overviewPanel = {
layout : 'hbox',
/* layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
*/
defaults :{
frame : true,
flex : 1
},
items : [detailPanel,extraPanel]
};
vp = new Ext.Viewport({
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
});
</script>
<link rel="stylesheet" type="text/css" href="/script/ext/resources/css/ext-all.css" />
</head>
<body>
<div id="overview" class="x-hidden">
<div id="pageDetail">
<dl>
<dt>Page URL</dt>
<dd>/contact/</dd>
<dt>Navigation Title</dt>
<dd>Get in touch...</dd>
</dl>
<dl>
<dt>Associate project to types</dt>
<dd> </dd>
<dt>Associate projects related to other projects</dt>
<dd> </dd>
</dl>
</div>
<div id="pageExtra">
<div id="pageWorkflow">
<em>Current Status</em><br>
Live on 08/03/2010 23:23 by username
<br/>
<em>Workflow</em><br>
Some status text
<dl>
<dt>Last Updated</dt>
<dd>07/03/2010 10:10</dd>
<dt>Updated by</dt>
<dd>username*</dd>
</dl>
<br/>
</div>
<div id="pageAccess">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae neque risus, non elementum arcu. Donec et convallis ipsum. Vivamus nec viverra nunc.
</div>
</div>
</div>
</body>
</html>