ExtJS TabPanel, пропускающий полосу прокрутки в ViewPort
Вот раздел HTML из недавнего проекта:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{DYNAMIC(TITLE)}</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
<div id="header">
<h1><!-- Page title --></h1>
<ol id="navigation">
<!-- Navigation items -->
</ol>
<div class="clearfix"></div>
</div>
<div id="sidebar">
<!-- Sidebar content -->
</div>
<!-- Page content -->
<p id="footer"><!-- Footer content --></p>
</body>
</html>
И вот тот же самый код как основанное на таблице расположение.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{DYNAMIC(TITLE)}</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
<table cellspacing="0">
<tr>
<td><!-- Page Title --></td>
<td>
<table>
<tr>
<td>Navitem</td>
<td>Navitem</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td><!-- Page content --></td>
<td><!-- Sidebar content --></td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>
</body>
</html>
единственная чистота я вижу, в котором основанное на таблице расположение является тем, что я фанатичен со своим добавлением отступа. Я уверен, что довольное раздел имело бы еще две встроенных таблицы.
Другая вещь думать о: размеры файла . Я нашел, что основанные на таблице разметки являются дважды размером своих дубликатов CSS обычно. На нашей широкополосной связи hig-скорости, которая не является огромной проблемой, но это находятся на тех с набором модемы.
1 ответ
В верхнем коде попробуйте установить для свойства autoScroll значение true :
new Ext.TabPanel({
region:'center',
id:'center',
activeTab:0,
defaults:{ autoScroll:true }, // here
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
layout:'fit',
autoScroll:true
}]
})
Таким образом, все вкладки, которые вы добавите позже, будут иметь autoScroll автоматически устанавливается на true .