CODEWITHSUNDEEP
extjs
assembler
assembler

Reputation: 3300

extjs how to pass parameters from container to a nested container

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?

Upvotes: 0

Views: 378

Answers (1)

norbeq
norbeq

Reputation: 3076

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.

Upvotes: 1

Related Questions