Ссылки внутри страницы (Ext.tree.Panel -> Ext.panel.Panel)
Добрый вечер !!!
Надо сделать аналог HTML-а в ExtJS: <h1 id="heading1">heading 1</h1> ... <a href="#heading1">Ссылка на heading 1</a> Есть: слева Ext.tree.Panel (оглавление), по центру Ext.panel.Panel (HTML). Надо при клике на ветку дерева проматывать Панель к месту где есть "heading1" Код:
//Дерево (Оглавление документа)
var TreeViewOglav = Ext.create('Ext.tree.Panel', {
store: storeOglav,
region: "west",
...
listeners: {
itemclick: function (view, rec, item, index, eventObj) {
var _leaf = rec.get('leaf');
if (_leaf == true) {
//FunShowHeading('heading' + rec.get('id'));
//Вот здесь надо промотать текст, находящийся в Панели, до места где находится "heading" + rec.get('id')
}
}
}
});
//Панель (Документ в формате HTML)
var panelDocs = new Ext.create("Ext.panel.Panel", {
title: "Документ",
autoScroll: true,
autoLoad: {
url: "Docs.ashx?id_doc=" + id
},
region: 'center'
});
|
можно так
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
var text = Ext.String.repeat('<p>текст</p>', 30);
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Ветка", expanded: true, children: [
{ text: "Заголовок 1", leaf: true },
{ text: "Заголовок 2", leaf: true}
]},
{ text: "Заголовок 3", leaf: true}
]
}
});
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Tree',
width: 200,
store: treeStore,
rootVisible: false,
region: 'west'
});
treePanel.on('itemclick', function (view, rec, item, index) {
if (index) { // для простоты просто индекс элементов использовал
document.location.href = "#heading" + index;
}
});
var htmlPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
autoScroll: true,
bodyStyle: 'padding:10px',
html: '<h1 id="heading1">Заголовок 1</h1>' + text +
'<h1 id="heading2">Заголовок 2</h1>' + text +
'<h1 id="heading3">Заголовок 3</h1>' + text
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
defaults: {
split: true
},
items: [
treePanel,
htmlPanel
]
});
});
</script>
</head>
<body></body>
</html>
|
Да, всё классно работает !!!
Но у меня все items располагаются в Ext.Viewport
Ext.create("Ext.Viewport", {
layout: "border",
html: '<h1> Документация ... </h1>',
...
items: [
...
]
});
И при клике на оглавления исчезает верхушка Ext.Viewport-та, вот эта: ... html: '<h1> Документация ... </h1>', ... Не подскажите, почему так происходит ??? |
уберите html: ... из viewport
и добавьте "северный" north элемент в моем примере выше замените блок viewport на, например, такой
Ext.create('Ext.container.Viewport', {
layout : 'border',
defaults: {
split: true
},
items: [
{xtype: 'component', region: 'north', style: 'padding: 10px;', html: '<h1> Документация ... </h1>'},
treePanel,
htmlPanel
]
});
весь код http://jsbin.com/egudom/edit#source демо http://jsbin.com/egudom |
Pavel M.,
Ок, спасибо !!! |
Цитата:
|
nekto_O,
а что обязательно так извращаться? зачем тогда вообще ExtJS? А ещё есть варианты ??? |
...
TreeViewOglav.on('itemclick', function (v, rec, itm, idx) {
var el = Ext.get('heading'+(++idx)); // при условии что порядковый номер нода совпадает с порядком заголовка
if( !el ) return false;
var b = panelDocs.body;
b.scroll('b', el.getY(), true);
});
...
примерно так, но вообще юзать ид-шники не советую, лучше name или class в крайнем случае (если сразу с несколькими элементами нужно работать)... |
Цитата:
|
Цитата:
|
nekto_O,
Я прошу прощения, но ни как не могу добиться результата ... По разному пробовал и всегда el = null Соответственно return false; Может я что-то не так делаю:
var el = Ext.get("heading" + rec.get('id'));
if( !el ) return false;
var b = panelDocs.body;
b.scroll('b', el.getY(), true);
П.С. "heading" + rec.get('id') - точно есть в тексте Документа (в Панели). |
другой пример - без использования идентификаторов.
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
var text = Ext.String.repeat('<p>текст</p>', 50);
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "item1", leaf: true },
{ text: "item2", leaf: true },
{ text: "item3", leaf: true }
]
}
});
var treePanel = Ext.create('Ext.tree.Panel', {
title: 'Tree',
width: 200,
store: treeStore,
rootVisible: false,
region: 'west'
});
treePanel.on('itemclick', function (v, rec, itm, idx) {
var els = Ext.query('h1[name*='+rec.get('text')+']', htmlPanel.dom),
el = Ext.get(els[0]);
if( !el ) return false;
htmlPanel.body.scroll('b', el.getY(), true);
});
var htmlPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
autoScroll: true,
bodyStyle: 'padding:10px',
html: '<h1 name="item1">item1</h1>' + text +
'<h1 name="item2">item2</h1>' + text +
'<h1 name="item3">item3</h1>' + text
});
Ext.create('Ext.container.Viewport', {
layout : 'border',
defaults: {
split: true
},
items: [
treePanel,
htmlPanel
]
});
});
</script>
</head>
<body></body>
</html>
|
Спасибо!!!
Уже, наверное, завтра попробую ))) |
nekto_O,
Работает, но не корректно !!! Почему: Добишите в htmlPanel, например: "title: 'TITLE'"
var htmlPanel = Ext.create('Ext.panel.Panel', {
title: 'TITLE',
region: 'center',
autoScroll: true,
bodyStyle: 'padding:10px',
html: '<h1 name="item1">item1</h1>' + text +
'<h1 name="item2">item2</h1>' + text +
'<h1 name="item3">item3</h1>' + text
});
И провертеть ))) Пока, что, то, что дал Pavel M. единственный рабочий вариант ... |
Цитата:
...
var h = htmlPanel.getHeader() ? htmlPanel.getHeader().getHeight() : 0;
htmlPanel.body.scroll('b', el.getY()-h, true);
...
|
Спасибо за помощь !!!
|
| Часовой пояс GMT +3, время: 19:41. |