This issue keeps bobbing up like a turd that won't flush (excuse the imagery, but too much time with Ext JS will do that to a man).
Here's the simplest way I've found to do add custom tabs to MODX resources and filling them with custom HTML:
Add a Custom Tab to the Right of Existing Tabs
1. Create a plugin that fires on the
OnDocFormPrerender event.
2. In the plugin, use code like the following:
<?php
switch ($modx->event->name) {
// Add a custom tab to the MODX create/edit resource pages
case 'OnDocFormPrerender':
$custom_html = 'Your custom HTML, e.g. from a model function or API lookup etc.';
$modx->regClientStartupHTMLBlock('<script type="text/javascript">
MODx.on("ready",function() {
MODx.addTab("modx-resource-tabs",{
title: "My Custom Tab",
id: "custom-resource-tab",
width: "95%",
html: '.json_encode(utf8_encode("$custom_html")).'
});
});
</script>');
}
This is trickier if you need to execute Javascript on the included HTML because the "on ready" event will have already fired. One workaround I've found for this is to use Ext JS's "autoLoad" parameter and set the "scripts" attribute to true (if that is false, all the JS on the example.html page will be ignored):
MODx.addTab("modx-resource-tabs",{
title: "My Custom Tab",
id: "custom-resource-tab",
width: "95%",
autoLoad: {
url: "/example.html",
scripts : true
}
});
We can take advantage of the addTab() convenience function.
Add a Custom Tab to the Left of Existing Tabs
As above, but adjust the plugin code so it injects some javascript
<?php
switch ($modx->event->name) {
// Add a custom tab to the MODX create/edit resource pages
case 'OnDocFormPrerender':
$custom_html = 'Your custom HTML, e.g. from a model function or API lookup etc.';
$modx->regClientStartupHTMLBlock('<script type="text/javascript">
MODx.on("ready",function() {
Ext.getCmp("modx-resource-tabs").insert(0, {
title: "Custom Tab",
id: "custom-resource-tab",
width: "95%",
html: '.json_encode(utf8_encode("$custom_html")).'
});
});
</script>');
}
In the second example, we can't take advantage of the "addTab" function, so instead we use the "insert" function and we specify an index of 0 to indicate the first spot in the array (i.e. the left-most spot).
When you need to use a PHP-generated string inside Javascript, there are two subtle headaches lurking there that the above solution avoids:
1.
Double-quote the string. This isn't our first day at programming school, we have to do this to *force* the output to be a string and not an object because json_encoding an object will end up as some sort of {} variant and it will not populate our tab. Some functions may return objects that will not behave as strings until you trigger __toString() e.g. via concatenation or as I did here, by double-quoting the string.
2.
Use utf_encode() before you encode to JSON. This will ensure that your solution works even if you have special characters in it.
Both solutions take advantage of Ext JS's "html:" attribute, which is a good way to inject 100% custom HTML into the existing MODX forms. It bypasses all the insanity of formatting and debugging hell that is the overly complex mess of working Ext JS. My conclusions of it are damning so my goal with any MODX manager customizations are to get my code into the manager with the least amount of interaction with Ext JS as possible. I want to punch Ext JS right in the Angular.js...
[ed. note: Everettg_99 last edited this post 9 years, 10 months ago.]
☆ A M B ☆
☆ A M B ☆
☆ A M B ☆
☆ A M B ☆