Complicated Ext.js questions

Hello folks

I need a help from someone from core team who works on JS portion of the Admin panel.
I have the specific class and I need to manipulate some fields on the data object form of that class. For example I need to attach to one Select element on the form by using its name and implement my code for the onChange event.

I need to create a custom Ajax loader of the data and populate another field on the form with the results of the ajax request. Think of it as Dependent select element. I have a field collection with Select element and want to attach to each element withing the collection and do my things.

Also I need to attach to other elements on the Data object form and read and write data from them as well.

So the main question is how to query elements on the Data object form using the name of the element specified in Class editor.

I am sure that I cannot use the DOM for that, but I was hoping that I can do something like Ext.components.find(‘name_here’) and get the element and all children of it.
Please help me to find a solution because it is really important.

Maybe you should try create custom data component with response from custom controller depends of value in another field.

Guys I’ve found that I can query the components using
Ext.ComponentQuery.query('combobox[name="attribute"]')
The problem is that part is working when I execute it in the console of the browser, but does not work when I do the same from the plugin. Below is the code from my plugin js:

postOpenObject: function (params,broker){
    console.log(Ext.ComponentQuery.query('combobox[name="attribute"]'));
    console.log(params.edit.layout.query('combobox[name="attribute"]'));
}

I think I am almost there … please advice

I just remembered, I did something similar, where I toggle certain field-collections based on checkboxes, here is the code:

pimcore.registerNS('zeroridge.warehouse');
pimcore.registerNS('zeroridge.warehouse.product_stock');

zeroridge.warehouse.product_stock = Class.create({
    eventsRegistered: false,

    initialize: function (tab, type) {
        var me = this,
            stockPanel = tab.edit.layout.down('[name=Stock]');

        stockPanel.on('show', function() {
            if (me.eventsRegistered) {
                return;
            }

            var stockCheckboxItem = this.down('[name=stockTypeStock]'),
                backToBackCheckboxItem = this.down('[name=stockTypeBackToBack]'),
                supplierStockCheckboxItem = this.down('[name=stockTypeSupplier]'),
                retiredStockCheckboxItem = this.down('[name=stockTypeRetired]'),
                supersededStockCheckboxItem = this.down('[name=stockTypeSuperseded]'),
                digitalProductCheckboxItem = this.down('[name=digitalProduct]'),
                allCheckboxItems = [
                    stockCheckboxItem,
                    backToBackCheckboxItem,
                    supplierStockCheckboxItem,
                    retiredStockCheckboxItem,
                    supersededStockCheckboxItem,
                    digitalProductCheckboxItem
                ];

            allCheckboxItems.forEach(function(checkboxItem) {
                var panelName = checkboxItem.getName() + 'Panel',
                    detailPanel = stockPanel.down('[name='+panelName+']');

                checkboxItem.on('change', function(checkbox, newValue, oldValue) {
                    if (newValue) {
                        if (detailPanel) {
                            detailPanel.show();
                        }

                        if (checkbox.getName() !== 'stockTypeSuperseded') {
                            allCheckboxItems.forEach(function (chbxItem) {
                                if (chbxItem.getName() !== 'stockTypeSuperseded') {
                                    if (chbxItem.getId() !== checkbox.getId()) {
                                        chbxItem.setValue(false);
                                    }
                                }
                            });
                        }
                    }
                    else {
                        if (detailPanel) {
                            detailPanel.hide();
                        }
                    }
                });

                if (detailPanel) {
                    if (checkboxItem.getValue()) {
                        detailPanel.show();
                    }
                    else {
                        detailPanel.hide();
                    }
                }
            });

            me.eventsRegistered = true;
        });
    }
});

that is my plugin js:

    postOpenObject: function (tab, type) {
        if (tab.data.general.o_className === 'ZeroRidgeProduct') {
            var stock = new zeroridge.warehouse.product_stock(tab, type),
                resetChangesFunction = tab.resetChanges,
                renderTab = new coreshop.warehouse.label.render(tab);

            tab.tabbar.add(renderTab.getLayout());

            tab.resetChanges = function () {
                resetChangesFunction.call(tab);

                renderTab.reload();
            };
        }
    },

maybe that helps…

Yup… that should help… Thank you

One more question… since I am working with field collection - I need to attach to all items that user may create. I am looking for the event that is triggered when you add new field collection item on object edit form.

And one more… how is it possible to attach to layout.render event? … like when layout is rendered I want to execute my function…

sorry, don’t know how to do that…

I ended up with override of fieldcollection.js in my js file. There I am checking the name of field collection and if it is my name - I do some additional logic, if not - just execute default code from parent class.