Results 1 to 4 of 4

Thread: Click events of custom HTML elements in a TreePanel not working

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default Click events of custom HTML elements in a TreePanel not working

    In V3 using the TreeCheckNodeUI to add custom HTML elements (eg drop down list) to the tree nodes works fine including the click events working.

    In V4 overriding the Ext.tree.Column initComponent() inserts the HTML elements OK (similar to V3) but the click events dont work, as follows:

    Click Problems in V4 (using Firefox):

    • The drop down lists values dont change when theyre clicked/selected
    • Also, if the drop down element is clicked the list appears (as expected), clicked again it disappears (as expected), clicked again it wont reappear unless another object is clicked and the drop down list element loses focus first (not as expected)

    Is there something in V4 that we might have overlooked that needs to be overridden to make the click events work for the inserted HTML elements?
    (Perhaps this relates to the HTML element click events/ focus being propagated to the containing tree).

    Test code provided below, any suggestions on how to get the HTML select click events working are appreciated:


    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
        
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
      
    </head>
    
    <script type="text/javascript">
    
    
    
    Ext.override(Ext.tree.Column, {
    
        initComponent: function() {
            var origRenderer = this.renderer || this.defaultRenderer,
                origScope    = this.scope || window;
    
            this.renderer = function(value, metaData, record, rowIdx, colIdx, store, view) {
                var buf   = [],
                    format = Ext.String.format,
                    depth = record.getDepth(),
                    treePrefix  = Ext.baseCSSPrefix + 'tree-',
                    elbowPrefix = treePrefix + 'elbow-',
                    expanderCls = treePrefix + 'expander',
                    imgText     = '<img src="{1}" class="{0}" />',
                    checkboxText= '<input type="button" role="checkbox" class="{0}" {1} />',
                    formattedValue = origRenderer.apply(origScope, arguments),
                    href = record.get('href'),
                    target = record.get('hrefTarget'),
                    cls = record.get('cls');
                
                while (record) {       
                    if (!record.isRoot() || (record.isRoot() && view.rootVisible)) {
                        if (record.getDepth() === depth) {
                            buf.unshift(format(imgText,
                                treePrefix + 'icon ' + 
                                treePrefix + 'icon' + (record.get('icon') ? '-inline ' : (record.isLeaf() ? '-leaf ' : '-parent ')) +
                                (record.get('iconCls') || ''),
                                record.get('icon') || Ext.BLANK_IMAGE_URL
                            ));
                            if (record.get('checked') !== null) {
                                buf.unshift(format(
                                    checkboxText,
                                    (treePrefix + 'checkbox') + (record.get('checked') ? ' ' + treePrefix + 'checkbox-checked' : ''),
                                    record.get('checked') ? 'aria-checked="true"' : ''
                                ));
                                if (record.get('checked')) {
                                    metaData.tdCls += (' ' + treePrefix + 'checked');
                                }
                            }
                            if (record.isLast()) {
                                if (record.isExpandable()) {
                                    buf.unshift(format(imgText, (elbowPrefix + 'end-plus ' + expanderCls), Ext.BLANK_IMAGE_URL));
                                } else {
                                    buf.unshift(format(imgText, (elbowPrefix + 'end'), Ext.BLANK_IMAGE_URL));
                                }
                                
                            } else {
                                if (record.isExpandable()) {
                                    buf.unshift(format(imgText, (elbowPrefix + 'plus ' + expanderCls), Ext.BLANK_IMAGE_URL));
                                } else {
                                    buf.unshift(format(imgText, (treePrefix + 'elbow'), Ext.BLANK_IMAGE_URL));
                                }
                            }
                        } else {
                            if (record.isLast() || record.getDepth() === 0) {
                                buf.unshift(format(imgText, (elbowPrefix + 'empty'), Ext.BLANK_IMAGE_URL));
                            } else if (record.getDepth() !== 0) {
                                buf.unshift(format(imgText, (elbowPrefix + 'line'), Ext.BLANK_IMAGE_URL));
                            }                      
                        }
                    }
                    record = record.parentNode;
                }
                if (href) {
                    buf.push('<a href="', href, '" target="', target, '">', formattedValue, '</a>');
                } else {
                    buf.push(formattedValue);
                }
                if (cls) {
                    metaData.tdCls += ' ' + cls;
                }
    
    //DEMO CODE modified here to add the HTML <select> element
    
                return buf.join('') +'<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>';
    
            };
            this.callParent(arguments);
        }
    });
    
    
    Ext.application({
    
        name : 'MyApp',
    
        launch : function() {
    
            var store = Ext.create('Ext.data.TreeStore', {
                        root : {
                            expanded : true,
                            children : [{
                                        text : "Vehicle Type",
                                        checked:false,
                                        leaf : true
                                    }, {
                                        text : "Other",
                                        expanded : true,
                                        children : [{
                                                    text : "Vehicle Type",
                                                    checked:false,
                                                    leaf : true
                                                }, {
                                                    text : "Vehicle Type",
                                                    checked:false,
                                                    leaf : true
                                                }]
                                    }, {
                                        text : "Vehicle Type",
                                        checked:false,
                                        leaf : true
                                    }]
                        }
                    });
    
            Ext.create('Ext.container.Viewport', {
                layout : 'border',
    
                items : [{
                            xtype : 'panel',
                            title : 'My Panel',
                            region : 'center',
                            items : [{
                                        xtype : 'treepanel',   
                                        title : 'My Tree Panel',
                                        store : store,
    
                                        viewConfig : {
    
                            }
                                    }]
                        }, {
                            xtype : 'panel',
                            width : 595,
                            title : 'My Panel',
                            html : '<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select><br><select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>                </select>',
                            region : 'west'
                        }]
    
            })
        }
    });
    
    
    </script>
    
    <body>
    
    </body>
    </html>
    Last edited by dee1; 17 Feb 2012 at 6:06 AM. Reason: revised explanation of problem for clarity

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You can render whatever you want into any element. So if you can find the element you want to append a child to, then get the Ext.Element instance of it and use appendChild or one of the insert methods.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Thanks for the info - I realize my question wasn't very clear, Ive revised and added more details for clarity.

    Basically, I've been able to add the elements to the TreePanel nodes by overriding the Ext.tree.Column initComponent() function given the HTML element details come from the store (I was hoping this would have the same effect of using Ext.Element??).

    The problem is the mouse clicks aren't working (the element seems to be inserted fine).
    Hence, will inserting HTML elements (drop down lists) in the TreePanel cause conflicts with click events?
    If so, is there an approach to solve this?
    Thanks.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Possibly a bug?
    Chrome ok but Firefox broken.

    Ive put together a simpler example (see below) that just uses the 'templatecolumn' xtype template to render HTML - works fine in Chrome but not Firefox (various results in Safari/ IE).

    The bug seems to relate to the 'x-grid-row' style for the the tree row <tr> element (<tr class="x-grid-row x-grid-row-selected x-grid-row-focused">)
    Although going through the code it's a mystery where/ how this causes a problem.

    Any pointers on where this might be causing a problem would be a real help

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
        
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
      
    </head>
    
    <script type="text/javascript">
    
    
    
    
    Ext.application({
    
        name : 'MyApp',
    
        launch : function() {
    
            var store = Ext.create('Ext.data.TreeStore', {
                fields:['text', 'checked', 'leaf', 'dropDown'],
                        root : {
                            expanded : true,
                            children : [{
                                        text : "Vehicle Type",
                                        checked:false,
                                        leaf : true,
                                        dropDown:'N/A'
                                    }, {
                                        text : "Other",
                                        expanded : true,
                                        children : [{
                                                    text : "Vehicle Type",
                                                    checked:false,
                                                    leaf : true,
                                                    dropDown:'<select><option value="volvo">Volvo</option><option value="saab">Saab</option></select>'
                                                }, {
                                                    text : "Vehicle Type",
                                                    checked:false,
                                                    leaf : true,
                                                    dropDown:'N/A'
                                                }]
                                    }, {
                                        text : "Vehicle Type",
                                        checked:false,
                                        leaf : true,
                                        dropDown:'<select><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>'
                                        
                                    }]
                        }
                    });
    
            Ext.create('Ext.container.Viewport', {
                layout : 'fit',
    
              
                           
                            items : [{
                                        xtype : 'treepanel',   
                                        title : 'My Tree Panel',
                                        store : store,
                                        fields:['text', 'dropDown'],
                                        
                                        columns: [
                                                  {text: 'Decription',  dataIndex:'text', xtype:'treecolumn', flex:1},
                                                  {text: 'Vehicle Type',    xtype: 'templatecolumn', tpl: '{dropDown}', flex:1}
    
                                              ],
                                        viewConfig : {
    
                            }
                                
                        }]
    
            })
        }
    });
    
    
    </script>
    
    <body>
    
    </body>
    </html>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •