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?

@Hown_ The alias method produces the same result. Yes, when I add them to my navigation view "alone" they both work. — Nick, Sep 09 '14 at 15:23

score 2 · Accepted Answer · answered Sep 09 '14 at 15:17

2

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.

answered Sep 09 '14 at 15:17

Saki

5,827
2
15
15

Thanks, that did the trick. Is it not possible to contain one panel inside another? – Nick Sep 09 '14 at 15:33
Panels can be nested indefinitely, Forms can't. – Alexander Sep 09 '14 at 15:33
Yes, you can nest panels within a reason. Form in form is outside of reasonable boundaries. Even if you could perhaps make it working somehow, such setup is illogical and not easy to grasp. I love simple and straightforward solutions - in your case, logic like this: OK, I need a reusable fieldset so define it as a class and then use where I need. – Saki Sep 09 '14 at 15:40

How do I add a custom xtype to another view?

1 Answers1