PDA

View Full Version : Button toggling problem



mtdave
7 Jul 2010, 9:47 AM
Hi, I've created a Ext.ToolBar with 3 buttons. Each button is related to a Ext.Window. I want the button to be toggled = true for when the Window is shown and false when the Window is hidden. I've added a listener to the window hide event that runs a function. The function uses the Ext.get function to get the associated button element. Then I use the toggle method on the element, but the methods is hiding the button, not toggling it. Does anyone have any ideas on this? I put a subset of the javascript below.

Thanks

7 Jul 2010, 9:50 AM
Please reformat your post (edit) to enclose your code within [ code ] and [ /code ] tags.

mtdave
7 Jul 2010, 9:54 AM
//Create the dialog button bar
var bb = new Ext.Toolbar({
defaultType: 'button',
items: [{
id: 'btnToc',
icon: 'images/CriticalDetails.png',
enableToggle: true,
pressed: true,
tooltipType: 'title',
scale: 'large',
width: 'auto',
tooltip: {text:'Dialog box for controlling visible layers', title:'Table of Contents'},
handler: function () {
showLegend();
}
}, {
id: 'btnAddr',
icon: 'images/Form.png',
enableToggle: true,
pressed: true,
tooltipType: 'title',
scale: 'large',
width: 'auto',
tooltip: {text:'Dialog box for querying broadband<br />availability by address', title:'Address Query Form'},
handler: function () {
showAddrWin();
}
}, {
id: 'btnRes',
icon: 'images/List.png',
enableToggle: true,
tooltipType: 'title',
scale: 'large',
width: 'auto',
tooltip: {text:'Dialog box for displaying broadband<br />query results', title:'Query Results'},
handler: function() {
//map.setCenter(mapbnd.getCenter(), initzoom);
showQryRes();
}
}]
});

//Create the toolbar window
var buttonBarWin = new Ext.Window({
applyTo: 'dialogbar',
layout: 'fit',
closable: false,
draggable: false,
x: 80,
y: 100,
width: 140,
height: 75,
autoScroll: false,
resizable: false,
header: true,
title: 'Dialogs',
items: bb
});

buttonBarWin.show();

//Create the Layer Legend Form
var layerForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'checkbox',
items: [{
id: 'layChk',
boxLabel: 'Generalized Broadband Coverage',
hideLabel: true,
checked: true,
handler: arcLayerChecked
}, {
xtype: 'box',
anchor: '',
isFormField: false,
hideLabel: true,
autoEl: {
tag:'div', children:[{
tag:'img',
qtip:'Generalized Broadband Coverage',
src:'images/type.png'
}]
}
}]
});

//Layer Info Tab Panels
var layerTab = new Ext.TabPanel({
activeTab: 0,
items: [{
title: 'General',
bodyStyle: 'padding:5px;',
items: layerForm
}, {
title: 'Technology',
bodyStyle: 'padding:5px;',
html: 'Technology Layers'
}, {
title: 'Provider',
bodyStyle: 'padding:5px;',
html: 'Provider Layers'
}]
});

//Layer Info Dialog Window
layerInfo = new Ext.Window({
applyTo: 'layerInfo',
layout: 'fit',
closeAction: 'hide',
//constrain: true,
x: 20,
y: 300,
width: 250,
height: 300,
//autoScroll: true,
//resizable: false,
header: true,
title: 'Table of Contents',
items: layerTab,
listeners: {
hide: hideLegend
}
});

showLegend();

// functions to display feedback
function showLegend() {
if (layerInfo) {
layerInfo.show();
}
}
function hideLegend() {
var lgndIcon = Ext.get('btnToc');
if (lgndIcon) {
lgndIcon.toggle();
}
}

mtdave
7 Jul 2010, 10:09 AM
Either of these is making the button hide.



Ext.fly('btnToc').toggle();



function hideAddrWin() {
var addrIcon = Ext.get('btnToc');
if (addrIcon) {
addrIcon.toggle();
}
}

mtdave
7 Jul 2010, 10:14 AM
Ah, I think I figured it out. I needed to use Ext.getCmp('btnToc'); to grab the component. Now the toggle is working.

Thanks

7 Jul 2010, 10:27 AM
yes, Ext.get !== Ext.getCmp.

That said, you should not depend on Ext.getCmp to develop applications.

Some things to watch if you have time:
http://tdg-i.com/364/abstract-classes-with-ext-js

Presentation on Building base classes with Ext JS: http://vimeo.com/9758715