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 */);
});
}
精彩评论