extjs how to pass parameters from container to a nested container

Question

I have two js files, the maincomp and the nestedcomp. nestedcomp would be used as a reusable component and that is why I need to send parameters to it. This maincomp file:

Ext.define('mycomponents.maincomp', {
    extend: 'Ext.window.Window',

    itemId: 'maincomp',
    xtype: 'maincomp',

    modal: true,
    bodyPadding: 10,
    height: 350,
    width: 270,
    closeAction: 'destroy',
    resizable: false,
    renderTo: Ext.getBody(),

    requires: [
        'mycomponents.nestedcomponent'
    ],

    layout: {
        type: 'table',
        columns: 1
    },

    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'Name',
            name: 'name',
            labelAlign : 'right',
            width: 265,
            allowBlank: false
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Age',
            name: 'age',
            labelAlign : 'right',
            width: 265,
            allowBlank: false
        }
        {
            xtype: 'nestedcomp'
        }
    ]
});

and this is my nestedcomp file:

Ext.define('mycomponents.nestedcomponent', {
    extend: 'Ext.container.Container',

    id: 'nestedcomp',
    xtype: 'nestedcomp',

    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'Address',
            name: 'address',
            id: 'address',
            labelAlign : 'right',
            width: 265,
            allowBlank: false
        }
    ],

    constructor: function (config) {
         this.callParent(arguments);
         this.initConfig(config);
         return this;
   },

    initComponent: function () {

    }

});

Maybe this is very naive question but the thing is I have no idea on how to pass parameters from maincomp to nestedcomp. I went into the official documentation, and google for an answer, but I was unable to find a solution in order to achieve this, so my question is how to pass parameters from one component into its nested components?

What parameters do you want to pass to the nested component? — norbeq
– norbeq, Commented Apr 24, 2019 at 20:33
@norbeq it doesn't matter the parameter, the how is what I need to know — assembler
– assembler, Commented Apr 24, 2019 at 20:55

norbeq · Accepted Answer · 2019-04-24 21:16:40Z

I mostly pass extra parameters to nested component in initComponent:

Ext.define('mycomponents.maincomp', {
    extend: 'Ext.window.Window',

    itemId: 'maincomp',
    xtype: 'maincomp',

    modal: true,
    bodyPadding: 10,
    height: 350,
    width: 270,
    closeAction: 'destroy',
    resizable: false,
    renderTo: Ext.getBody(),

    requires: [
        'mycomponents.nestedcomponent'
    ],

    layout: {
        type: 'table',
        columns: 1
    },

    initComponent: function () {
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'name',
                labelAlign : 'right',
                width: 265,
                allowBlank: false
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Age',
                name: 'age',
                labelAlign : 'right',
                width: 265,
                allowBlank: false
            },
            {
                xtype: 'nestedcomp',
                abc: this.xyz
            }
        ];
        this.callParent(arguments);
    }
});

Or i just do something method on this view in ViewController like form.loadRecord(r), form.setValues(v) where form is the Ext.form.Panel after view is rendered.

Collectives™ on Stack Overflow

extjs how to pass parameters from container to a nested container

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related