We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Adding a tab to a Resource Edit page with Ext JS

    • 9207 ☆ A M B ☆
    • 2,475 Posts
    Everett Reply #1, 13 years, 7 months ago
    Anyone have pointers on how I might be able to add a new tab to the right of the the "Template Variables" tab?

    http://www.screencast.com/t/0rUCbu1O7esk

    There aren't too many MODX docs on Ext JS, and the ones I've looked at did not enlighten me...

    I've identified the JS files that draw this stuff in the MODX core, but appending to that JS object from another file is beyond me.

    Thanks for any tips.
      Hosting stuff: http://fireproofsocks.com/
      Coding stuff: http://craftsmancoding.com/
      Blog stuff: http://tipsfor.us/
      • 38520
      • 13 Posts
      Phil Reply #2, 13 years, 7 months ago
      You can add the new tab via Form Customization under security but it looks like that is only to move TV's to new tabs.

      I'm also interested in creating a new tab that loads a custom plugin in the tab. Probably the same result you are trying to do. So Bump!
        • 9207 ☆ A M B ☆
        • 2,475 Posts
        Everett Reply #3, 13 years, 7 months ago
        No, it can't be via Form Customization -- I need to know the mechanics here for a custom Resource type and some plugins.
          Hosting stuff: http://fireproofsocks.com/
          Coding stuff: http://craftsmancoding.com/
          Blog stuff: http://tipsfor.us/
          • 38520
          • 13 Posts
          Phil Reply #4, 13 years, 7 months ago
          Exactly what I'm trying to do as well. So hopefully someone can chime in.
            • 18373 ☆ A M B ☆
            • 3,141 Posts
            Mark Hamstra Reply #5, 13 years, 7 months ago
            https://github.com/Mark-H/VersionX2/blob/master/core/components/versionx/templates/mgr/tabs/resources.tpl

            <script type="text/javascript">
    MODx.on("ready",function() {
        MODx.addTab("modx-resource-tabs",{
            title: _('versionx.tabheader'),
            id: 'versionx-resource-tab',
            width: '95%',
            items: [{
                xtype: 'versionx-panel-resources',
                //layout: 'anchor',
                width: 500
            },{
                html: '<hr />',
                width: '95%'
            },{
                layout: 'anchor',
                anchor: '1',
                items: [{
                    xtype: 'versionx-grid-resources'
                }]
            }]
        });
    });
</script>
              Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

              Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
              • 9207 ☆ A M B ☆
              • 2,475 Posts
              Everett Reply #6, 13 years, 7 months ago
              Brilliant. Next question: where does one put PHP code to generate the HTML contants for that tab? Where is that controller referenced?
                Hosting stuff: http://fireproofsocks.com/
                Coding stuff: http://craftsmancoding.com/
                Blog stuff: http://tipsfor.us/
                • 18373 ☆ A M B ☆
                • 3,141 Posts
                Mark Hamstra Reply #7, 13 years, 7 months ago
                The xtype references in there are the result of an Ext.reg() call, referencing an object that extends Ext/MODx.Component. This one: https://github.com/Mark-H/VersionX2/blob/master/assets/components/versionx/js/mgr/resources/panel.resources.js and this one https://github.com/Mark-H/VersionX2/blob/master/assets/components/versionx/js/mgr/resources/grid.resources.js

                In VersionX I'm using a plug OnDocFormPreRender: https://github.com/Mark-H/VersionX2/blob/master/core/components/versionx/elements/plugins/versionx.plugin.php#L68 which calls outputVersionsTab here: https://github.com/Mark-H/VersionX2/blob/master/core/components/versionx/model/versionx.class.php#L663 that just fetches the tpl file I posted earlier and uses modx->regClientStartupHTMLBlock to put it in the html.

                It's not a controller or custom resource class, just a plugin that registers html that does extjs foo. tongue

                If you just want to put basic HTML in, without ExtJS, you could make this the tab config:

                <script type="text/javascript">
    MODx.on("ready",function() {
        MODx.addTab("modx-resource-tabs",{
            title: 'Tab Title',
            id: 'some-custom-tab-id',
            width: '95%',
            items: [{
                html: '<h2>Stuff!</h2><p>This is some awesome text in HTML.</p>'
            }]
        });
    });
</script>
                  Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

                  Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
                  • 9207 ☆ A M B ☆
                  • 2,475 Posts
                  Everett Reply #8, 13 years, 7 months ago
                  Sorry Mark, I'm still confused -- I see how you're getting the JS into the page. So I could conceivably do this:

                  <script type="text/javascript">
    MODx.on("ready",function() {
        MODx.addTab("modx-resource-tabs",{
            title: 'Tab Title',
            id: 'some-custom-tab-id',
            width: '95%',
            items: [{
                html: '<?php print $my_tab_content; ?>'
            }]
        });
    });
</script>


                  but printing PHP stuff inside JS is usually the wrong way to do things.... is that what you're doing in the outputVersionsTab() function?

                  I guess what I'm expecting to see is an Ajax request somewhere -- you've drawn the tab and said its "xtype" is "versionx-panel-resources"... and then you've defined a grid (panel.resources.js)and some columns that correspond to this xtype (I don't really know what an xtype is, but so far I'm with you). What I don't see is how that grid definition magically fires off some PHP code somewhere to actually populate that grid. If it were a straight-up while loop or something it'd be much easier to spot, but trying to follow this is like trying to follow the butterfly effect... one small things changes in one place, and there are huge consequences in some seemingly unrelated area.

                  E.g. what if you wanted the contents of a tab to be the output of a simple "Hello World" script? Or what if you did want it to loop over and paginate a series of rows from the database? Or in this case, what if you want to display a series of form controls?

                  And lastly, there's the matter of how that gets formatted... it's a black box for most of the Ext JS stuff -- it coughs out HTML somehow, but are there rules to how it can/should be styled? When I've printed HTML into a CMP, I feel like it's cargo-cult coding: I try to emulate the same classes as the Ext JS generated stuff, but I really have no idea where that's coming from.
                    Hosting stuff: http://fireproofsocks.com/
                    Coding stuff: http://craftsmancoding.com/
                    Blog stuff: http://tipsfor.us/
                    • 8274 ☆ A M B ☆
                    • 222 Posts
                    Jason Sonderman Reply #9, 13 years, 1 month ago
                    This is a somewhat old thread, but Everett your question on where the grid is getting data from is sort of answered in the doc Mark posted here:
                    https://github.com/Mark-H/VersionX2/blob/master/assets/components/versionx/js/mgr/resources/panel.resources.js

                    the 
                    action: 'mgr/resources/getlist'
                    points to a php processor that supplies the content.

                    If you wanted to just output static html, I suppose you could make your "action" parameter point to a PHP file that just returned an html string.

                    As for formatting, My impression is that you could always override the CSS by firing a 
                    $modx->regClientCSS
                    to inject a new set of CSS styles for the selectors ExtJS creates. Never tried it though.
                      • 9207 ☆ A M B ☆
                      • 2,475 Posts
                      Everett Reply #10, 13 years, 1 month ago
                      Thanks Jason -- I still haven't been able to make this work. It's quite frustrating. I've noticed that it's possible to add a tab to the *right* of existing tabs, but not to replace/repurpose existing tabs (or add tabs to the *left* of existing tabs).

                      Re the regClientCSS: the problem is that you cannot override stuff. The functionality is keyed off the path, so doing something like 

                      $modx->regClientCSS('/x.css');
$modx->regClientCSS('/x.css');


                      will result in only one stylesheet link being printed into the document, but you cannot do the same when you really do want to replace the original file. In other words, the following loads both files:

                      $modx->regClientCSS('/x.css');
$modx->regClientCSS('/replace-x.css');


                      There's no way for you to replace the built-in CSS and JS files that are loaded in the manager requests. The best you can do is load your own modifications after the built-in files are loaded, but sometimes that's too late to affect certain behavior, it's not what you wanted, and it makes the manager slower than it already is.

                      I filed a bug report about this: http://tracker.modx.com/issues/10101 The MODX manager needs a "de-register" function and/or a way to uniquely identify each file loaded off of something besides its URL. WordPress, for example, keys these off of handles like 'jquery' etc. precisely for this reason: it allows you to unload and replace core elements (e.g. by using a CDN version of a file).

                      Having a few more functions would make our lives easier, but ultimately, we need more documentation on how to do this.
                        Hosting stuff: http://fireproofsocks.com/
                        Coding stuff: http://craftsmancoding.com/
                        Blog stuff: http://tipsfor.us/