How do I add a custom xtype to another view?

Question

I have two views and I want one to be nested inside the other, like a partial view. My two views are as follows:

ChemicalRisksView.js

    Ext.define('HandSurvey.view.ChemicalRisksView', {
        extend: 'Ext.form.Panel',
        xtype: 'chemicalrisksview',
        requires: [
            'Ext.form.FieldSet',
            'Ext.field.Text',
            'Ext.Button',
            'HandSurvey.view.SpecificChemicalView'
        ],
        config: {
            items:[{
                xtype: 'fieldset',
                title: 'Fiberglass & Resins',
                items: [
                    {
                        name: 'test',
                        xtype: 'specificchemicalview'
                    },
                    {
                        xtype: 'button',
                        text: 'Save',
                        action: 'saveChemicalRisks',
                        margin: '10 5',
                        ui: 'confirm'
                    }
                ]        
            }]
        }
    });

SpecificChemicalView.js

Ext.define('HandSurvey.view.SpecificChemicalView', {
    extend: 'Ext.form.Panel',
    xtype: 'specificchemicalview',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Toggle',
        'Ext.field.Select',
        'Ext.field.Text',
        'Ext.Button'
    ],
    config: {
        items:[{
            xtype: 'fieldset',
            title: 'Edit Specific Chemical',
            items: [
                {
                    name: 'name',
                    xtype: 'textfield',
                    label: 'Name'
                },
                {
                    name: 'model',
                    xtype: 'textfield',
                    label: 'Model #'
                },
                {
                    name: 'manufacturer',
                    xtype: 'textfield',
                    label: 'Manufacturer'
                },
                {
                    name: 'averageExposure',
                    xtype: 'textfield',
                    label: 'Average Exposure Time'
                },
                {
                    name: 'msdsOnFile',
                    xtype: 'checkboxfield',
                    label: 'MSDS On File'
                },
                {
                    name: 'additionalInfo',
                    xtype: 'textfield',
                    label: 'Additional Info'
                },
                {
                    xtype: 'button',
                    text: 'Save Chemical',
                    action: 'saveChemical',
                    margin: '10 5',
                    ui: 'confirm'
                }
            ]    
        }]
    }
});

So I have defined the xtype as specificchemicalview and added it to the items in the 'parent' view. But, nothing happens. It just shows nothing in the ChemicalRisksView. I am debugging in Chrome and there are no error messages.

I am using this same method to add all my views to my main navigation view and that works fine. What am I missing here?

Answer 1

In HTML, form cannot contain another form. Although it could work in Ext as it does not use <form> tag, I do not think it is a good idea. Form is designed to contain form fields (isFormField:true) that another form is definitely not one.

I would consider a re-design where the "specific view" would extend FieldSet adding necessary form fields as its items.

That should solve the problem.