开发者

How can I programmatically trigger an event on a panel?

开发者 https://www.devze.com 2023-01-29 19:33 出处:网络
I have the following according menu. The user clicks on the headers of the panels and a region in the middle changes, that works.

I have the following according menu.

The user clicks on the headers of the panels and a region in the middle changes, that works.

However, I always want to programmatically click the panels, e.g. so that I can create hyperlinks in the text which open up panels, just as if the user clicked on them.

How can I trigger an event click programmatically on a panel in my accordion menu, something like this:

Ext.select('span#internal_link_001').on('click', function() {
    Ext.getCmp('panelApplication').trigger('click'); //error "trigger is not a function"
});

Accordion menu code:

Ext.onReady(function(){

    menuItemStart = new Ext.Panel({
        id: 'panelStart',
        title: 'Start',
        html: 'This is the start menu item.',
        cls:'menuItem'
    });

    menuItemApplication = new Ext.Panel({
        id: 'panelApplication',
        title: 'Application',
        html: 'this is the application page',
        cls:'menuItem'
    });

    menuItemModules = new Ext.Panel({
        id: 'panelModules',
        title: 'Modules',
        layout: 'card',
        html: 'this is the modules page',
        cls:'menuItem'
    });

    menuItemSettings = new Ext.Panel({
        id: 'panelSettings',
        title: 'Settings',
        layout: 'card',
        html: 'this is the settings page',
        cls:'menuItem'
    });

    var regionMenu = new Ext.Panel({
        region:'west',
        split:true,
        width: 210,
        layout:'accordion',
        layoutConf开发者_StackOverflow中文版ig:{
            animate:true
        },
        items: [ menuItemStart, menuItemApplication, menuItemModules, menuItemSettings ]
    });
    ....


Why don't you use the appropriate component features:

Ext.onReady(function(){

    menuItemStart = new Ext.Panel({
        id: 'panelStart',
        ...
    });

    menuItemApplication = new Ext.Panel({
        id: 'panelApplication',
        ...
    });

    menuItemModules = new Ext.Panel({
        id: 'panelModules',
        ...
    });

    menuItemSettings = new Ext.Panel({
        id: 'panelSettings',
        ...
    });

    var regionMenu = new Ext.Panel({
        ...
        layout:'accordion',
        items: [ menuItemStart, menuItemApplication, menuItemModules, menuItemSettings ]
    });

    Ext.select('span#internal_link_001').on('click', function() {
        regionMenu.getLayout().setActiveItem('panelApplication' /* use the ID or the numeric index */);
    });
}
0

精彩评论

暂无评论...
验证码 换一张
取 消