PDA

View Full Version : [2.0b1] Panel button - id property hijacked!



IanGrainger
26 Oct 2007, 2:33 AM
I am using Ext 2.0 Beta 1, and I've created a basic Ext panel and added a 'maximize' button to the toolbar with the following code:



// Main panel
MainPanel.superclass.constructor.call(this, {
contentEl: 'imagePreviewContainer',
id: 'mainPanel',
region:'center',
deferredRender:false,
collapsible:false,
layout:'fit',
title: 'Main Panel',
tools: [
maximiseButton,
restoreButton
],
tbar: mainPanelToolBar
}

// Maximise button
var maximiseButton = new Ext.Toolbar.Button({
id: 'maximize',
cls: 'maximiseButton',
ctCls: 'maximiseButtonCT',
on: {
click: function() {
// TODO minimise other toolbars
}
}
});

This code works, and I have a maximise button (and it looks lovely :) !). However, it seems that the id property is being hijacked to determine the type (and class) of the button. When I inspect the element in firebug I see this:



<div id="mainPanel" class="x-panel x-border-panel" style="left: 310px; top: 32px; width: 509px;">
<div id="ext-gen27" class="x-panel-header x-unselectable" style="-moz-user-select: none;">
<div id="ext-gen32" class="x-tool x-tool-maximize" style="display: block;"/>
<div id="ext-gen37" class="x-tool x-tool-restore" style="display: none;"/>
<span id="ext-gen61" class="x-panel-header-text">Document Preview</span>
</div>
<div id="ext-gen28" class="x-panel-bwrap">
</div>
</div>

So it seems that Ext has taken my id, prepended 'x-tool-' to it and added it as a class, and then set the id to something else. Also, you'll notice that neither the cls, nor the ctCls class has been set to what i gave in the button's configuration ('maximiseButton' and 'maximiseButtonCT').

I wouldn't mind this behaviour, except we're writing automated tests with TestComplete, and we really need some way of identifying those buttons so that we can click on them as part of the test, and everything I try to set has been removed or hijacked! :(

Thank you in advance for your help!

jsakalos
28 Oct 2007, 5:20 PM
This behavior is intentional and is documented in API docs/Panel/tools. Also, the id is not assigned to the tool button markup by default.

IanGrainger
30 Oct 2007, 3:41 AM
Um. OK. Thanks for your help. If it's not assigned by default, can I force it to be assigned?

jsakalos
30 Oct 2007, 9:02 AM
You could override addTool method of Panel but beware that ids you pass to constructor identify the function of the buttons so you have to give them other ids as "minimize", "maximize", etc. to avoid conflicting ids of more than one panel.