How can I access a menu in a panel's tbar in ExtJS?

Question

I have a mediaGrid of type Ext.Panel. The panel contains a tbar with a button group item which contains a menu with check boxes. I need to be able to access which boxes are checked from outside the mediaGrid declaration but I'm not sure how to do that. Here is the mediaGrid declaration:

var mediaGrid = new Ext.Panel({
    id: 'mediaviewer',
    region: 'center',
    border: false,
    items: mediaDataView,
    style: 'border-left: 1px solid #d0d0d0',

    tbar: [
        {
            xtype: 'buttongroup',
            title: 'Filters',
            items: [
                {
                    text: 'Show',
                    icon: '/img/picture.png',
                    iconAlign: 'top',
                    menu: {
                        xtype: 'menu',
                        defaults: {
                            hideOnClick: false,
                            listeners: {
                                checkchange: function (checkitem) {
                                    var menu = checkitem.ownerCt;
                                    var values = [];

                                    if (menu.pictureCheck.checked) {
                                        values.push('picture');
                                    }
                                    if (menu.videoCheck.checked) {
                                        values.push('video');
                                    }
                                    if (menu.noteCheck.checked) {
                                        values.push('note');
                                    }

                                    if (values.length == 0) {
                                        values.push('none');
                                    }

                                    mediaStore.reload({ params: { type: values.toString()} });
                                }
                            }
                        },

                        items: [
                            {
                                text: 'Pictures',
                                checked: true,
                                ref: 'pictureCheck'
                            },
                            {
                                text: 'Videos',
                                checked: true,
                                ref: 'videoCheck'
                            },
                            {
                                text: 'Notes',
                                checked: true,
                                ref: 'noteCheck'
                            }
                        ]
                    }
                }

            ]
        },
        '->',
        {
            xtype: 'searchfield',
            store: mediaStore,
            emptyText: 'Search',
            enableKeyEvents: true,
            listeners: {
                keyup: {
                    fn: function (thisField, e) {
                        if (!e.isNavKeyPress() && thisField.isValid()) {
                            thisField.onTrigger2Click();
                        }
                    },
                    buffer: 500
                }
            }
        },
        ' ',
        ' '
    ]
});

I have a button on another panel that, when clicked, opens an Ext.Window to add a new node to a media GridPanel. When the user clicks 'Save' it should add the note to the GridPanel but it should also check the menu to see if the filter for displaying notes is on. This is why I need to access the menu. Does anyone know how to access that menu in the mediaGrid?

Answer 1

You could always create the objects outside of your panel, then just include them in the panel. This would allow you to have a reference to them where ever you like.

For example:

var menu = new Ext.menu.Menu({
    //your menu configuration
});

var tbar = new Ext.Toolbar({
    //your toolbar configuration
    //...
    items: [menu] //and so on
});

var mediaGrid = new Ext.Panel({
    //your mediagrid configuration
    tbar: tbar
});