How To Have Reference To An Accordin In Extjs?

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. E

Solution 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 gridExt.define('DemoGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'demogrid',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '555-222-1254'
        }]
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    flex: 1
});

//controllerExt.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 containExt.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 panelExt.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: '100%',
    controller: 'demo',
    height: 700,
    items: [{
        xtype: 'panel',
        reference: 'demoAccordion',
        layout: {
            // layout-specific configs go heretype: '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()
});