Modx hide content field from a specific tab

Question

Modx revo latest version

I need to hide content field from a specific tab i created with form customisation, i found this Ext JS code but i have no idea how to implement that. Is it a plugin ondocformrender ? Should i create a js file ?

Ext.onReady(function(){
var tabPanel = Ext.getCmp("modx-resource-tabs");

if(tabPanel!=null){
    //Add my custom tab
    var customTab = {
        title: 'Custom',
        id: 'my-custom-tab',
        cls: 'modx-resource-tab',
        layout: 'fit',
        labelAlign: 'top',
        labelSeparator: '',
        bodyCssClass: 'tab-panel-wrapper main-wrapper',
        autoHeight: true,
        defaults: {
            border: false,
            msgTarget: 'under',
            width: 400,
            height:800
        },
        items: [
            {
                xtype: "box",
                autoEl: {cn: '<div id="target_id"></div>'}
            }
        ]
    };
    tabPanel.on('tabchange', function(parent,selectedTab){ 
        if (selectedTab.id == 'my-custom-tab') {
            Ext.getCmp("modx-resource-content").hide();
        }
        else {
            Ext.getCmp("modx-resource-content").show();
        }
    });
    tabPanel.insert(0, customTab);
    tabPanel.setActiveTab(0);
    tabPanel.doLayout();
}
});

Answer 1

I did a plugin like this on OnDocFormPrerender:

<?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">
        Ext.onReady(function(){
var tabPanel = Ext.getCmp("modx-resource-tabs");

if(tabPanel!=null){
    tabPanel.on(\'tabchange\', function(parent,selectedTab){ 
        if (selectedTab.id == \'modx-ref\') {
            Ext.getCmp("modx-resource-content").hide();
        }
        else {
            Ext.getCmp("modx-resource-content").show();
        }
    });
    tabPanel.insert(0, customTab);
    tabPanel.setActiveTab(0);
    tabPanel.doLayout();
}
});               
    </script>');
}