We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 52883
    • 2 Posts
    I am attempting to write a plugin that will automatically scroll the resource/elements trees to the currently selected item if one exists. I am not familiar with Ext but have managed to hack together a script that essentially works aside from the fact that it relies on delaying execution to try and ensure that the resource tree is fully refreshed and therefore the element may be found.

    Is there any way to determine more accurately when tree refresh completes either by responding to an available event, watching for changes in the DOM, injecting script into the tree output itself, or any alternative approach.

    My current work in progress below to give some idea of what I am trying to achieve.

    <?php
    /*
        EVENTS(S):
        OnManagerPageBeforeRender
    */
    
    
    
        $script = "
            <script type='text/javascript'>
    
                MODx.on('ready',function() {
                   
                    /* ------------------------------------------------------------------------------------- */
                    /* When editing documents scroll resource tree to currently active document if available */
                    /* Prevents irritating behviour whereby tree reloads from top with every edit.           */
                    /* ------------------------------------------------------------------------------------- */
                    setTimeout(function(){ //wait 4 seconds before execution to ensure tree has loaded. Ideally this would run on a tree loaded callback instead
    
                      
    
                        var selectedResource = Ext.select('.x-tree-selected');
                        selectedResource.each(function(element){ //using each due to unfamiliarity with framework although we only expect one element returned
                            var curElement = Ext.get(element);
                           
                            var myElement = document.getElementById(curElement.getAttribute('id')); //again dropping into standard JS due to unfamiliarity with EXT  framework
                            myElement.scrollIntoView();
                            document.getElementById('ext-gen15').scrollTop -= 90; //push element slightly down from top so can better be seen in context
                        });
                    }, 4000);
                });
            </script>
        ";
    
        $modx->regClientStartupHTMLBlock($script);
        $modx->regClientStartupHTMLBlock('<link rel="stylesheet" type="text/css" href="'.MODX_BASE_URL.'assets/css/manager.css" />');
        return;
    
      • 44195
      • 293 Posts
      I haven't tried with a tree before, but could you check for the lastOptions property to see if it's loaded somehow?
      http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-property-lastOptions
        I'm lead developer at Digital Penguin Creative Studio in Hong Kong. https://www.digitalpenguin.hk
        Check out the MODX tutorial series on my blog at https://www.hkwebdeveloper.com