23.05.2011, 16:26
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
|
Реализация заголовка в стандартном стиле.
Есть пример:
http://dev.sencha.com/deploy/ext-4.0...t-browser.html
Там довольно красиво на темно-синей растяжке выполнен заголовок (тот который Ext.Layout.Browser).
Сваять руками используя свойство html соотв. компонента, кастомный span стиль и бэкграунд как картинку конечно можно и самому, но уж очень как-то они хитро там это дело делают.
В самой странице каркас шьется скриптом из layout-browser.js, но там просто прописан h1 заголовок, в то же время в файербаге ясно видно присвоение элементу div кучи стилей, причем если попытаться их тупо перенести с правкой путей - так не отображает...
Простите за сложный слог, но посоветуйте, может в ExtJS есть набор стандартных стилей, которые можно неявно назначать элементу, например путем присвоения нужного имени свойству id или еще как... |
|
23.05.2011, 16:29
|
 |
prodigy
|
|
Регистрация: 01.11.2010
Сообщений: 503
|
|
|
__________________
readOnly
|
|
23.05.2011, 16:59
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
|
Я понял что это фон, но как и где он прописан ? В коде просто прописаны id и h1 заголовок и ... все.
|
|
23.05.2011, 17:01
|
 |
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
|
Фон прописан DIV'у в который вложен заголовок.
Не слышали про firebug ?
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете." 
Мой сертификат :-D клацай
|
|
23.05.2011, 17:04
|
|
prodigy
|
|
Регистрация: 01.11.2010
Сообщений: 503
|
|
|
Allan Stark,
А про таблицы стилей вы слышали? у родителя заголовка(div) задан класс стиля в котором и прописан фон
UPD
Прошу прощения, не обновил перед отправкой
__________________
readOnly
|
|
23.05.2011, 17:10
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
|
Простите где он там прописан ?
В layout-browser.js просто указан <h1> Ext.Layout.Browser</h1>
А в "скомпилированной" страничке таки да, прописан. А как он там появился ? Вот что интересует...
|
|
23.05.2011, 17:42
|
|
Профессор
|
|
Регистрация: 09.11.2009
Сообщений: 1,101
|
|
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1> Ext.Layout.Browser</h1>',
height: 30
}
Надпись id: 'header' видите ?
а по ID уже в css присваивается фон.
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
|
|
23.05.2011, 17:45
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
|
Ребята, вы наверно не поняли вопроса.
Ни в layout-browser.html, ни в layout-browser.js где описан заголовок ни div ни тем более стиль - не прописаны.
А по файербагу он конечно в страничке есть, отображается ведь.
Вопрос в том, как он туда попал ? В ExtJS есть какие-то предусмотренные по и применяемые неявно умолчанию стили например для заголовков ? Потому что простое прописывание вроде свойства "...html: '<h1>MyText</h1>" ничего подобного не дает.
|
|
23.05.2011, 17:51
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
У меня тоже в коде:
region: 'north',
xtype: 'box',
id: 'header',
height: 30,
html: '<h1>MyText</h1>'
Но тем не менее отображает просто полужирным на стандартном голубом фоне.
ExtJS 4, последний, скачен с сайта и настроен по его (4-му) туториалу. Все остальное работает. Новая концепция лайоута проще... |
|
23.05.2011, 17:54
|
|
Аспирант
|
|
Регистрация: 24.04.2010
Сообщений: 87
|
|
На всякий случай вся страница:
<!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>
|
|
|
|
