1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      0  

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

    Unanswered: 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 don’t work, as follows:

    Click Problems in V4 (using Firefox):
    • The drop down lists values don’t change when they’re 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
    dee1 is on a distinguished road

      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
    dee1 is on a distinguished road

      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>

Thread Participants: 1