Question

我正在尝试计算哪个 span -tags - 与它们标记的单词一起 - 在带有激活滚动条的 Ext.panel.Panel 中可见。

例如：

enter image description here

以下是实现上述视觉输出的代码：

<!DOCTYPE html>
<html>
<head>        
    <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>

    <link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <script type ="text/javascript">        
    Ext.onReady(function(){
        //Content of panel_1
        var panel_1_html = "<html><body>"+
                           "<span id='1' data-id='pic_1.jpg'>word_1 </span>"+
                           "<span id='2'>word_2 </span>"+
                           "<span id='3'>word_3 </span>"+
                           "<span id='4' data-id='pic_2.jpg'>word_4 </span>"+
                           "<span id='5'>word_5 </span>"+
                           "<span id='6' data-id='pic_3.jpg'>word_6 </span>"+
                           "<span id='7'>word_7 </span>"+
                           "<span id='8'>word_8 </span>"+
                           "<span id='9'>word_9 </span>"+
                           "<span id='10'>word_10 </span>"+
                           "<span id='11 data-id='pic_4.jpg''>word_11 </span>"+
                            /*
                             -many words, have variable length
                             -each with span, 
                             -some of the spans have data-id attribute, some don't
                            */
                           "<span id='n'>word_n</span>"+
                           "</body></html>";
        var panel_1 = Ext.create('Ext.panel.Panel', {
            title: 'panel_1',
            padding: '10 10 10 10',
            margin: '10 10 10 10',
            width: 130,
            height: 90,
            autoScroll: true,
            html: panel_1_html,
            renderTo: Ext.getBody()
        });

        var panel_2 = Ext.create('Ext.panel.Panel', {
            frame:true,
            title: 'panel_2',
            padding: '10 10 10 10',
            margin: '10 10 10 10',
            width: 300,
            height: 100,
            renderTo: Ext.getBody()
        });


        function panel_1_scroll_event_handler(event){
            panel_2.body.dom.scrollTop = panel_1.body.getScrollTop();
            panel_2.body.setHtml(""); //clear the body of second panel, don't know if this is mandatory

            //compute which words are visible in panel_1 body (i don't know how to do this)
            var VISIBLE_WORDS = /*my magical question*/;                

            //create a var which contains a html with the pics referenced by the data-id attribute:
            //i have already done this part, it works, try with: 
            //var VISIBLE_WORDS = panel_1.body.getHtml();
            var pics_html = [];
            var new_dom = document.createElement('div');
            new_dom.innerHTML = VISIBLE_WORDS;
            var all_spans = new_dom.getElementsByTagName('span');
            var pic_idx = 0;
            for (var i = 0; i < all_spans.length; i++) {
               var current_span_id_attr = all_spans[i].attributes[0];
               var current_span_data_id_attr = all_spans[i].attributes[1];

               if(current_span_data_id_attr != undefined){
                   pics_html[pic_idx] = "<img src='" + all_spans[i].attributes[1].nodeValue + "' height='40' width='40'>";
                   pic_idx = pic_idx + 1;
               }
            }
            pics_html = "<html><body>" + pics_html.join(" ") + "</html></body>";

            panel_2.body.setHtml(pics_html);
        }
        panel_1.body.addListener('scroll', panel_1_scroll_event_handler);

        });
    </script>
</head>
<body></body>

我的问题是我不知道如何计算，panel_1目前唯一的可见字是{ {1}}只有word_1 word_2 word_3 word_4和word_1只有{strong>数据ID 属性。

当然，如果用户滚动我想自动更新word_4，那么我添加了滚动事件及其处理程序方法，如上面的代码所示。

生成panel_2 html的代码已经有效，我在上面的代码中对它进行了评论。

问题

如何计算panel_2内可见哪些字词？

Answer 1

通过使用这些事实可以解决这类问题：

panel_1.body.dom.getElementsByTagName('span')：返回包含面板
panel_1.body.dom.getElementsByTagName('span')[i].getBoundingClientRect().top：返回span i
panel_1.body.dom.getElementsByTagName('span')[i].getBoundingClientRect().bottom：返回span i的底部边界框位置
panel_1.body.dom.getBoundingClientRect().top：返回包含panel_1
panel_1.body.dom.getBoundingClientRect().bottom：返回包含panel_1

对于每个范围，检查以下条件是否成立：

if(text_body_dom_bounding_rect_bottom > span_bounding_rect_bottom 
   && text_body_dom_bounding_rect_top < span_bounding_rect_top)
{
    //visible span found
}

ExtJs - Scroll-event-handler - 从panel.body

问题

1 个答案: