ExtJS viewport one item accessing another item

Question

I have create a viewport in ExtJS with several layouts (west, center, north). One of these is a grid to which I've added a click handler. This click is supposed to open an HTML or PHP file in one of the layout, but I am not sure how to access the item in the center from the click handler in the west.

 Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items: [{
            region: 'north',
            border:false,
            collapsible: false,
            resizable:false,
            title: 'North',
            split: true,
            height: 30,
            html: 'north'
        },{
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            split: true,
            width: '10%',
            xtype: 'gridpanel',
            itemid:'projectgrid',
            hideHeaders: true,
            columns: [{header: 'NID', dataIndex: 'NavName', flex: 1}],
            store: navStore,
            listeners: {
                itemclick: function(dv, record, item, index, e) {
                    alert(record.get('NavPage'));
                }
            }

        },{
            region: 'center',
            layout: 'border',
            border: false,
            id: 'renderArea',
            items: [{
                region: 'center',
                html: 'center center',
                title: 'Center',
                items: [cw = Ext.create('Ext.Window', {
                    xtype: 'window',
                    closable: false,
                    minimizable: true,
                    title: 'Constrained Window',
                    height: 200,
                    width: 400,
                    constrain: true,
                    html: 'I am in a Container',
                    itemId: 'center-window',
                    minimize: function() {
                        this.floatParent.down('button#toggleCw').toggle();
                    }
                })]
            }]
        }]
    });

Evan Trimboli Evan Trimboli · Accepted Answer · 2013-03-14T07:07:36

If you give the component you want to access an itemId of foo, you can do something like this, navigate up to the viewport, then down to find the appropriate viewport child.

dv.up('viewport').down('#foo')

ExtJS viewport one item accessing another item

1 Answers