Реализация заголовка в стандартном стиле.
Есть пример:
http://dev.sencha.com/deploy/ext-4.0...t-browser.html Там довольно красиво на темно-синей растяжке выполнен заголовок (тот который Ext.Layout.Browser). Сваять руками используя свойство html соотв. компонента, кастомный span стиль и бэкграунд как картинку конечно можно и самому, но уж очень как-то они хитро там это дело делают. В самой странице каркас шьется скриптом из layout-browser.js, но там просто прописан h1 заголовок, в то же время в файербаге ясно видно присвоение элементу div кучи стилей, причем если попытаться их тупо перенести с правкой путей - так не отображает... Простите за сложный слог, но посоветуйте, может в ExtJS есть набор стандартных стилей, которые можно неявно назначать элементу, например путем присвоения нужного имени свойству id или еще как... |
|
Я понял что это фон, но как и где он прописан ? В коде просто прописаны id и h1 заголовок и ... все.
|
Фон прописан DIV'у в который вложен заголовок.
Не слышали про firebug ? |
Allan Stark,
А про таблицы стилей вы слышали? у родителя заголовка(div) задан класс стиля в котором и прописан фон UPD Прошу прощения, не обновил перед отправкой |
Простите где он там прописан ?
В layout-browser.js просто указан <h1> Ext.Layout.Browser</h1> А в "скомпилированной" страничке таки да, прописан. А как он там появился ? Вот что интересует... |
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1> Ext.Layout.Browser</h1>',
height: 30
}
Надпись id: 'header' видите ? а по ID уже в css присваивается фон. |
Ребята, вы наверно не поняли вопроса.
Ни в layout-browser.html, ни в layout-browser.js где описан заголовок ни div ни тем более стиль - не прописаны. А по файербагу он конечно в страничке есть, отображается ведь. Вопрос в том, как он туда попал ? В ExtJS есть какие-то предусмотренные по и применяемые неявно умолчанию стили например для заголовков ? Потому что простое прописывание вроде свойства "...html: '<h1>MyText</h1>" ничего подобного не дает. |
У меня тоже в коде:
region: 'north', xtype: 'box', id: 'header', height: 30, html: '<h1>MyText</h1>' Но тем не менее отображает просто полужирным на стандартном голубом фоне. ExtJS 4, последний, скачен с сайта и настроен по его (4-му) туториалу. Все остальное работает. Новая концепция лайоута проще... |
На всякий случай вся страница:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TEST14</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/app.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
xtype: 'box',
id: 'header',
height: 30,
html: '<h1>MyText1</h1>'
}, {
region: 'center',
items: [{
xtype: 'panel',
border: false,
title: 'MyText2',
}]
}, {
region: 'east',
title: 'MyText3',
width: 350
}]
});
});
</script>
</head>
<body></body>
</html>
|
| Часовой пояс GMT +3, время: 19:35. |