Question

我有以下菜单。

用户点击面板的标题，中间的区域发生变化，这有效。

但是，我总是希望以编程方式点击面板，例如这样我就可以在文本中创建打开面板的超链接，就像用户点击它们一样。

如何在手风琴菜单中的面板上以编程方式触发事件点击，如下所示：

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

手风琴菜单代码：

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',
        layoutConfig:{
            animate:true
        },
        items: [ menuItemStart, menuItemApplication, menuItemModules, menuItemSettings ]
    });
    ....

Answer 1

为什么不使用适当的组件功能：

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 */);
    });
}

如何以编程方式触发面板上的事件？

1 个答案: