1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
    grantrj is on a distinguished road

      0  

    Default [2.1][FIXED] TreePanel Text Box Display Postion Bug

    [2.1][FIXED] TreePanel Text Box Display Postion Bug


    Guys,
    We have a funny thing happening and we believe that it is a bug. Can anyone confirm this?

    When adding a new node to the tree and the treepanel has scollbars and the node is appended in the hidden area of the panel, then you'll see a textbox popping up at the bottom of the screen pushing the whole UI at the top, as you can see from the screenshot

    see the attachment for an example.

    Cheers Grant
    Attached Images

  2. #2
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Are you using a Viewport and border layout? do you have 'autoScroll' set to true in your tree panel?

    I suspect this problem has to do with how your creating your layout - posting some code would help us figure it out.

  3. #3
    Ext JS Premium Member franjanko's Avatar
    Join Date
    Jan 2008
    Posts
    22
    Vote Rating
    0
    franjanko is on a distinguished road

      0  

    Default


    I'll answer to this question as I'm one of the developers working on that application...

    Basically we have a viewport divided in north and center regions.
    In the south region there is a panel that uses a border layout with the treepanel in the west region and other content in the center region (right content), with split:true.

    The treepanel has autoScroll set to true.

    Now I've created a small example that reproduces this bug:

    Code:
    Ext.onReady(function(){
        // shorthand
        var Tree = Ext.tree;
        
        var tree = new Tree.TreePanel({
            useArrows:true,
            autoScroll:true,
            animate:true,
            enableDD:true,
            //containerScroll: true,
            tbar:[
                {
                    text:'add new node',
                    handler:function(){
                        var parent = tree.getSelectionModel().selNode||root;
                        var node = parent.appendChild(new Tree.TreeNode({
                            id:Ext.id(),
                            draggable:false
                        }));
    			        // start editing after short delay
    			        (function(){
    			            node.expand(function(){
    			                
    			            });
    			            treeEditor.triggerEdit(node);
    			        }.defer(10));
                    }
                }
            ]
        });
    
        var treeEditor = new Ext.tree.TreeEditor(tree, {
    		 allowBlank:false,
    		 cancelOnEsc:true,
    		 completeOnEnter:true,
    		 ignoreNoChange:true,
             blankText:'A name is required',
             selectOnFocus:true
    	});
        
        // set the root node
        var root = new Tree.TreeNode({
            text: 'Ext JS',
            draggable:false,
            id:'source'
        });
        tree.setRootNode(root);
    
        var container = new Ext.Panel({
            el:Ext.getBody(),
            width:200,
            height:300,
            layout:'fit',
            items:[
                tree
            ]
        });
        container.render();
        root.expand();
    });
    If you paste the previous code into any empty html page you'll get a panel, with a treepanel inside and autoscroll:true

    If you click on "add new node" button in the top toolbar, and carry on adding new nodes until a scrollbar appear, then you'll also notice that the textbox that the editor produces appears outside the panel margins, causing the effect that Grant was trying to explain above.

    That is going to break any type of layout, and in our web application you can see the effect in the screenshot.

    The correct behaviour should be to programmatically scroll the panel down and avoid to the textbox to appear outside the boundaries of the container....


    I hope the explanation is clear enough, and shows you that this bug is part of the extjs treepanel component, so not really dependent from custom code we've written...

    Just would like to add that this javascript library never stop to amaze me...it's just great!

    I hope you can suggest us some solution for this...thanks in advance.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Confirmed. It behaves as you describe. I've tested it otherwise, not with showcase you posted.

    Moving the thread to bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Austin, Texas
    Posts
    24
    Vote Rating
    0
    smathis is on a distinguished road

      0  

    Default


    Glad I found this.

    We're having this problem in our app too. Any traction we can get on this issue would be greatly appreciated.

    Thanks.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Please test this out and let me know if you see any issues with it:

    Code:
    Ext.override(Ext.tree.TreeEditor, {
        triggerEdit : function(node, defer){
            this.completeEdit();
            if(node.attributes.editable !== false){
                this.editNode = node;
                if(this.tree.autoScroll){
                    node.ui.getEl().scrollIntoView(this.tree.body);
                }
                this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
                return false;
            }
        }
    });
    @smathis: Good to see another Austinite here

  7. #7
    Ext JS Premium Member franjanko's Avatar
    Join Date
    Jan 2008
    Posts
    22
    Vote Rating
    0
    franjanko is on a distinguished road

      0  

    Talking


    I can confirm to you that this fixed the issue.

    Now the panel scroll correctly the new node into view...perfect.

    Thanks for your help!

    Gianfranco

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Austin, Texas
    Posts
    24
    Vote Rating
    0
    smathis is on a distinguished road

      0  

    Default


    I'm still testing this code.

    It works great in Firefox. But I'm seeing problems in IE6. I'm looking at it now to see if the problem is specific to our application or within Ext. I'll post back when I have a better understanding.

    @brian: Yup, Austin is great. We joke around the office that we will hunt you down if Ext ever has a problem that doesn't get fixed. It's a credit to your team (and your API) that we've never had to seriously consider that. ;-)

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    In IE6 the scrollIntoView functionality I added works fine, but the only issue I see is that the editor is not properly aligned to the node (it is the width of the tree panel). Not sure why that is yet. If you are seeing something else let me know. I'm just testing with the test case code posted above.

    No need to hunt me down. I can usually be bribed with free beer...

  10. #10
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Austin, Texas
    Posts
    24
    Vote Rating
    0
    smathis is on a distinguished road

      0  

    Default


    Good to know. (about the beer)

    I've got this working now in our app. The developers were bypassing triggerEdit at first with a direct call to startEdit. That was my initial problem. Not sure why Firefox wasn't having an issue with it though...

    I've fixed that but now I'm seeing an issue in both IE and FFox. When the scrollIntoView is called it causes the entire page to jump down -- like there was an anchor tag on the node being edited or something.

    I've tracked it down to the following line...

    node.ui.getEl().scrollIntoView(this.tree.body);

    I'm looking into why the page is jumping now.

    Thanks again for all your help.