Inline editor - Ext JS

解决编辑器滚动问题

最新推荐文章于 2025-01-13 10:59:25 发布

最新推荐文章于 2025-01-13 10:59:25 发布 · 153 阅读

文章标签：

#EXT #IE #UP #prototype

extJs 专栏收录该内容

281 篇文章

订阅专栏

讨论了内联编辑器在编辑树节点文本时遇到的滚动问题，并提出了几种解决方案，包括将编辑器绑定到树面板主体使其随节点滚动，使用定时验证位置的方法以及监听滚动容器属性变化等。

The inline editor that's used to for example edit tree text nodes does not scroll when the container of the element it is editing scrolls. I seem to remember there's a neat, Ext way of fixing this, but it eludes me right now...

03-08-2007, 07:38 AM

It could be rendered to the tree panels body so it scrolls with the node. The problem with that is it can get clipped.

It could also use an interval to validate it's position while in edit mode... would be delayed though.

03-08-2007, 10:17 AM

I would expect the scroll event to end the edit session on the field, much like clicking on a page would close a menu.

my $.02

03-08-2007, 05:27 PM

simeon, I agree 100%. The problem is that scroll events don't bubble so there's no way I can generically attach and hide the editor. Maybe a code example in the download (it would be very short) showing how to wire it to the tree's scroll would make sense.

03-09-2007, 09:22 AM

If there is an ext equivalent to IE's onpropertychange event(custom event?). I would use a property on the scrolling container and attach a listener to that property.

<div onscroll="this.isScrolling = this.isScrolling*-1" isScrolling="1">

    <div>floating stuff here</div>
    <div>floating stuff here</div>

</div>

Then when I create a floating element (menu, edit form field, etc.), I would attach an onpropertychange event listener to the scrolling div. I would listen for a change to the isScrolling property which will be cycling between 1 and -1 as the container scrolls. If that listener is called then the floating elements will close themselves independently.

This could be accomplished implicitly when the floating elements are created by looping up through the dom looking to see if the containing elements have an isScrolling attribute. If it does, then the floating element could attach an event listener to its isScrolling attribute.

As for getting a working example, i would need to work on that next week. I have to have my prototype ready for a QA sneak peak on monday. :-)

03-09-2007, 05:15 PM

It's pretty easy to wire it up:

tree.getEl().on('scroll', function(){
    if(editor.editing){
        editor.cancelEdit();
    }
});

It will do the editing check internally in the next build.