Custom TV Input Options Validation

Development
1

I’m developing a standalone time TV and would like to validate a few of my option inputs. I know what to do in terms of settings in the tpl config, but am unsure about how to stop the saving of the TV when validation fails. Currently, the fields get properly marked when entering invalid data, but the form still submits. Below is the tpl code (showing only the fields I’m wanting to validate for brevity):

<div id="tv-input-properties-form{$tv}"></div>
<script type="text/javascript">
    // <![CDATA[{literal}
    var params = {
        {/literal}{foreach from=$params key=k item=v name='p'}
        '{$k}': '{$v|escape:"javascript"}'{if NOT $smarty.foreach.p.last}, {/if}
        {/foreach}{literal}
    };
    var oc = {
        'change': {
            fn: function () {
                Ext.getCmp('modx-panel-tv').markDirty();
            }, scope: this
        }
    };
    MODx.load({
        xtype: 'panel',
        layout: 'form',
        autoHeight: true,
        autoWidth: true,
        monitorResize: true,
        cls: 'form-with-labels',
        border: false,
        labelAlign: 'top',
        labelSeparator: '',
        defaultType: 'textfield',
        defaults: {
            anchor: '100%',
            msgTarget: 'under'
        },
        items: [{
            xtype: 'numberfield',
            allowDecimals: false,
            minValue: 90,
            allowNegative: false,
            fieldLabel: _('xmtimetv.time_width'),
            description: MODx.expandHelp ? '' : _('xmtimetv.time_width_desc'),
            name: 'inopt_timeWidth',
            id: 'inopt_timeWidth{/literal}{$tv}{literal}',
            value: params['timeWidth'],
            listeners: oc
        }, {
            xtype: MODx.expandHelp ? 'label' : 'hidden',
            forId: 'inopt_timeWidth{/literal}{$tv}{literal}',
            html: _('xmtimetv.time_width_desc'),
            cls: 'desc-under'
        }, {
            xtype: 'numberfield',
            allowDecimals: false,
            minValue: 1,
            maxValue: 60,
            allowNegative: false,
            fieldLabel: _('xmtimetv.time_increment'),
            description: MODx.expandHelp ? '' : _('xmtimetv.time_increment_desc'),
            name: 'inopt_timeIncrement',
            id: 'inopt_timeIncrement{/literal}{$tv}{literal}',
            value: params['timeIncrement'],
            listeners: oc
        }, {
            xtype: MODx.expandHelp ? 'label' : 'hidden',
            forId: 'inopt_timeIncrement{/literal}{$tv}{literal}',
            html: _('xmtimetv.time_increment_desc'),
            cls: 'desc-under'
        }],
        renderTo: 'tv-input-properties-form{/literal}{$tv}{literal}'
    });
    // ]]>
</script>
{/literal}

Thanks for any help you can offer!

2

OK, so I believe I tracked down why the TV-type-specific options are having no effect on the saving of the tv: The form panel in each tv type’s template file is rendered into the last item of the main tv input options panel (MODx.panel.TVInputProperties, config in manager/assets/modext/widgets/element/modx.panel.tv.js), but the actual field objects do not get added to that panel’s items array. As such, when the form’s validation is evaluated before submission (handleClick, in manager/assets/modext/core/modx.component.js), only the fields established in the tv options’ initial config are available.

Assuming I’ve got this generally right, I find myself wondering if the architecture of this process could be re-thought a bit; perhaps it’s possible to update the main tv options panel component’s items rather than appending it with the rendered additional options? I realize that the fact that the tv-specific options are loaded via ajax (when first creating or changing the tv type), and that may pose a problem with what I’m suggesting.

Anyway, perhaps those with more experience with Ext JS could point me in the right direction.