Форум

potkin · #1 (**permalink**) 16.04.2012, 21:36

Добрый вечер !!!

Надо сделать аналог 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'
 });

Pavel M. · #2 (**permalink**) 17.04.2012, 10:34

можно так

<!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>

potkin · #3 (**permalink**) 17.04.2012, 15:14

Да, всё классно работает !!!

Но у меня все items располагаются в Ext.Viewport

Ext.create("Ext.Viewport", {
 layout: "border",
 html: '<h1> Документация ... </h1>',
 ...
 items: [
  ...
 ]
});

И при клике на оглавления исчезает верхушка Ext.Viewport-та, вот эта:

...
 html: '<h1> Документация ... </h1>',
 ...

Не подскажите, почему так происходит ???

Pavel M. · #4 (**permalink**) 18.04.2012, 10:54

уберите 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

potkin · #5 (**permalink**) 18.04.2012, 16:15

Pavel M.,
Ок, спасибо !!!

nekto_O · #6 (**permalink**) 18.04.2012, 19:46

Сообщение от Pavel M.

document.location.href = "#heading" + index;

а что обязательно так извращаться? зачем тогда вообще ExtJS?

potkin · #7 (**permalink**) 18.04.2012, 20:01

nekto_O,

а что обязательно так извращаться? зачем тогда вообще ExtJS?

А ещё есть варианты ???

nekto_O · #8 (**permalink**) 18.04.2012, 21:05

...
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 в крайнем случае (если сразу с несколькими элементами нужно работать)...

Pavel M. · #9 (**permalink**) 18.04.2012, 22:55

Сообщение от nekto_O

а что обязательно так извращаться? зачем тогда вообще ExtJS?

это просто самый простой способ был

nekto_O · #10 (**permalink**) 19.04.2012, 07:53

Сообщение от Pavel M.

это просто самый простой способ был

в том то и дело что это скорее извращение а не адекватный способ скроллинга, почему бы тогда например вместо "Ext.panel.Panel" не заюзать обычный фрейм и не издеваться над ним подобным образом?

Форум

Справочник

Discord чат

Курсы javascript