How to have reference to an accordin in ExtJS?

Question

I'm working with an accordion that has 10 grids inside of it. So basically I would like to access each grid in the accordian but not really sure how to accomplish that in ExtJS.

Example: If I want to target a grid I can do this:

Ext.ComponentQuery.query('grid');

But if I use the above code it will target all of the grids from the UI and I don't want that. I ONLY want to target the grids from my accordian.

   layout: { 
            type: 'accordion', 
            animate: false, 
            fill: false, 
            hideCollapseTool: false, 
            collapseFirst: false, 
            titleCollapse: false, 
            multi: true,
            overflowHandler: 'scroller'
        }

Any ideas how to do that? Thank you in advance!

Answer 1

First thing accordion is not an xtype.

Accordion is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time.

As you ONLY want to target the grids from your accordian

if you have created your custom xtype:'accordion' then you can get like this me.down('accordion').query('grid') if me contain xtype:'accordion'.

If you have define reference then you can get like this lookupReference using controller or lookupReference using view.

Here I have created an small sencha fiddle demo. Hope this will help you.

//create grid
Ext.define('DemoGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'demogrid',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: '[e-mail]',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: '[e-mail]',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: '[e-mail]',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: '[e-mail]',
            phone: '555-222-1254'
        }]
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    flex: 1
});

//controller
Ext.define('DemoCnt', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.demo',

    onButtonClick: function (button) {
        var accordion = this.lookupReference('demoAccordion'); //if your Accordion Layout is inside of panel/coantainer then you can use like this {this.lookupReference(your refrence name)}.

        this.doGetAllGrid(accordion);

        /* var panel = button.up('panel');
         panel.down('[reference=demoAccordion]');

         panel.down('panel') also we get like this

         panel.down('panel[reference=demoAccordion]') also we get like this
         */

    },

    doGetAllGrid: function (accordion) {
        var data = [];
        //{accordion.query('grid')} return all grid as Accordion contain
        Ext.Array.forEach(accordion.query('grid'), function (item) {
            data.push('<b>' + item.title + '</b>');
        });
        Ext.Msg.alert('Success', 'Your all grid title is below :-<br>' + data.join('<br>'));
    }

});

//Accordion Layout panel
Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: '100%',
    controller: 'demo',
    height: 700,
    items: [{
        xtype: 'panel',
        reference: 'demoAccordion',
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            animate: false,
            fill: false,
            hideCollapseTool: false,
            collapseFirst: false,
            titleCollapse: false,
            // multi: true,
            overflowHandler: 'scroller'
        },
        defaults: {
            xtype: 'demogrid'
        },
        items: [{
            title: 'Grid 1'
        }, {
            title: 'Grid 2'
        }, {
            title: 'Grid 3'
        }, {
            title: 'Grid 4'
        }, {
            title: 'Grid 5'
        }, {
            title: 'Grid 6'
        }, {
            title: 'Grid 7'
        }, {
            title: 'Grid 8'
        }, {
            title: 'Grid 9'
        }, {
            title: 'Grid 10'
        }],
    }, {
        xtype: 'demogrid',
        margin:'10 0',
        title: 'Grid 11 will not inside of Accordion Layout '
    }],
    buttons: [{
        text: 'Get All Grid',
        height: 50,
        padding: '0 35',
        style: 'background: transparent;border: 2px solid #737373cc;',
        handler: function () {
            var panel = this.up('panel');
            panel.getController().doGetAllGrid(panel.down('[reference=demoAccordion]')); //Just call only common method of controller to get all grid.
        }
    }, {
        text: 'Get All using controller method with a reference',
        height: 50,
        padding: '0 35',
        style: 'background: transparent;border: 2px solid #737373cc;',
        handler: 'onButtonClick'
    }],
    renderTo: Ext.getBody()
});