1. #1
    Ext User
    Join Date
    May 2007
    Posts
    3
    Vote Rating
    0
    cdd is on a distinguished road

      0  

    Default No Key events getting to edit field in TreeEditor

    No Key events getting to edit field in TreeEditor


    Hi,

    I'm new to ext, and have had no problem following the *fabulous* docs that the team has produced. My application currently uses dojo for certain parts of the app, but we're starting to use ext for some compelling widgets -- particularly the grid and tree. I'm following the examples pretty closely, but when I attempt to use a tree editor, no keystroke events are showing up in the edit box.

    Contruction of the tree/editor looks like this:

    this.tree = new Ext.tree.TreePanel(this.divId, {
    animate:false,
    loader: new Ext.tree.TreeLoader({dataUrl:TRMCommon.getContextPath() + '/folderData.do'}),
    enableDD: false,
    containerScroll: false,
    singleExpand: false,
    rootVisible: false
    });

    this.editor = new Ext.tree.TreeEditor(this.tree, {
    maxLength: 40
    });

    this.editor.ignoreNoChange = true;


    The function that invokes the editor is here:
    addFolder: function(item) {
    var selectedNode = this.tree.getSelectionModel().getSelectedNode();
    if (selectedNode) {
    if (!selectedNode.isExpanded()) {
    selectedNode.expand();
    }


    var node = selectedNode.appendChild(new Ext.tree.TreeNode({
    text: 'New Folder',
    allowDrag: false,
    cls: 'folder'
    }));
    node["newNode"] = true;

    this.tree.getSelectionModel().select(node);

    var ge = this.editor;
    setTimeout(function() {
    ge.triggerEdit(node);
    },10);

    }
    },


    The editor field comes up fine, but keypresses do nothing inside of the field. I'm able to use the mouse to select or move the cursor inside the field, but keystrokes do nothing (although hitting Enter will close the edit field). Any ideas on what could be going on here (or where to look)? I've searched the forums, but found nothing similar...



    Thanks,

    Charles

  2. #2
    Ext Premium Member BernardChhun's Avatar
    Join Date
    Mar 2007
    Location
    Quebec, Canada
    Posts
    831
    Vote Rating
    2
    BernardChhun will become famous soon enough

      0  

    Default


    When you speak of keystroke event, you mean the appearance of the letter you've just pressed?

    A live link would be really helpful to debug as your code snippet doesn't tell us the Tree's context.

    I currently use a TreeEditor flawlessly in Firefox 2.0.0.3.

    what's your browser by the way?

    here's the function I use to build my TreeEditor on my TreePanel:

    Code:
    initEditor : function(){
    			// linking my editor to the treePanel
    			this.treeEditor = new Ext.tree.TreeEditor(this.menuTree, {autosize : true});
    			this.treeEditor.on("beforestartedit", 
    				function(o,target,text){
    					// validate some stuff to make sure the correct node was chosen
                                            // some of my tree nodes aren't changeable :)
    				}, this, true
    			);
    			this.treeEditor.on("complete",
    				function(o,newText,oldText){
                                             // make an xhr call to the server specifying the changes
    				}, this, true
    			);
    			
    		}

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    3
    Vote Rating
    0
    cdd is on a distinguished road

      0  

    Default


    Yes -- no text appears and the arrow keys do not move through the default blank text. If I register a complete handler, it never gets fired.

    Browsers are Firefox 2.0.0.3 and IE6 (don;t have the build ID offhand). Unfortunately, I can't post a live link... I'll try to recreate this outside of our main app so I can post complete code.



    Thanks,

    Charles

  4. #4
    Ext User
    Join Date
    May 2007
    Posts
    1
    Vote Rating
    0
    scowling is on a distinguished road

      0  

    Default


    Charles did you end up sorting this problem out?

    When I add editing to my tree nodes, in IE6 & 7 the "input field" doesn't show up, and neither do the typed letters, however they are actually there, and when I hit enter it does update.

    In firefox it works fine, the input field displays and I can see the text I have entered.

    Am interested to hear of you solution/workaround/fix

    Cheers
    Steve

  5. #5
    Ext Premium Member BernardChhun's Avatar
    Join Date
    Mar 2007
    Location
    Quebec, Canada
    Posts
    831
    Vote Rating
    2
    BernardChhun will become famous soon enough

      0  

    Default


    I have filed a bug concerning that matter in the bug forum and Jack said it was corrected in SVN.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    16
    Vote Rating
    1
    rodionos is on a distinguished road

      0  

    Default td.clientWidth

    td.clientWidth


    I traced down the problem to td.clientWidth computation in TreeEditor fitToTree method. In Firefox, clientWidth evaluates correctly, IE returns 0. The fix: explicitly set tree container width.

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    3
    Vote Rating
    0
    cdd is on a distinguished road

      0  

    Default


    I was finally able to trace down my original problem, which is not a prblem with ext at all. Most of our application is using Dojo, so the modal dialog in which this tree appears is actually a dojo widget. By default, the dojo dialog widget eats keystroke events that do not target a descendant of the dialog div. The ext controls are placed elsewhere in the dom, so keystroke (up,down,etc...) events were being stopped before reaching the ext code. I subclassed and modified dojo:dialog to fix this and all works well now.