Inline editor - Ext JS

# 2 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.

# 3 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

# 4 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.

# 5 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 οnscrοll="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. :-)

# 6 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.