<div>Good day list!</div>
<div> </div>
<div>While the GeoExt example for adding the Openlayers Navigation History controls to a toolbar works just fine for Previous and Next buttons with text, I had wanted to use the OL icons instead of text. There are examples on the OL pages for using the controls with the icons and this gave a nice presentation than just using text for the buttons. Still a newbie here wrt OL, ExtJS, and GeoExt. But, I knew had to somehow tell in code when to use the on and off png images for the different states of the controls. Tried several different approaches but could only get the button to use on of icons, off or on. Finally found an old thread that got me most of the way there and then I added one critcial part to it. Thought I'd share for others that may not know this what I found and came up with since it seems to work in my current project and I couldn't easily find a solution via web search.</div>
<div> </div>
<div>
<div>- For the css, these are the OL images ('scripts' is a local directory, but the rest should be in the OL theme directory)</div>
<div> </div>
<div><style type="text/css"></div>
<div>.prevon {<br> background-image: url(scripts/theme/default/img/view_previous_on.png) !important;<br> background: no-repeat;<br> width: 24px !important;<br> height: 24px !important;<br>}<br>.prevoff {<br> background-image: url(scripts/theme/default/img/view_previous_off.png) !important;<br>
background: no-repeat;<br> width: 24px !important;<br> height: 24px !important;<br>}<br>.nexton {<br> background-image: url(scripts/theme/default/img/view_next_on.png) !important;<br> background: no-repeat;<br>
width: 24px !important;<br> height: 24px !important;<br>}<br>.nextoff {<br> background-image: url(scripts/theme/default/img/view_next_off.png) !important;<br> background: no-repeat;<br> width: 24px !important;<br>
height: 24px !important;<br>}</div>
<div></style><br></div>
<div>Then create and configure the navigation history controls for the toolbar on my window. The key here seems to be to register activate and deactivate events for both next and previous controls AND also to switch the icon class when the control is activated or deactivated.</div>
<div> </div>
<div> var toolbarItems = [];</div>
<div><br> toolbarItems.push("-");</div>
<div> </div>
<div> // Navigation history - two "button" controls</div>
<div> </div>
<div> var nav = new OpenLayers.Control.NavigationHistory({id:"navhist"}); // id is optional, I refer to it in my code elsewhere<br> map.addControl(nav);<br> nav.activate(); </div>
<div> </div>
<div> // initially disabled</div>
<div> var buttonPrevious = new Ext.Toolbar.Button({<br> iconCls: 'prevoff',<br> tooltip: 'Previous map view', <br> disabled: true,<br>
handler: nav.previous.trigger<br> });</div>
<div> var buttonNext = new Ext.Toolbar.Button({<br> iconCls: 'nextoff',<br> tooltip: 'Previous map view', <br> disabled: true,<br> handler: nav.next.trigger<br>
});</div>
<div> </div>
<div> // add to toolbarItems</div>
<div> </div>
<div> toolbarItems.push(buttonPrevious);<br> toolbarItems.push(buttonNext);</div>
<div> </div>
<div> // register activate and deactivate events for both buttons</div>
<div> </div>
<div> nav.previous.events.register(<br> "activate", <br> buttonPrevious,<br> function() { <br> this.setDisabled(false);<br> this.setIconClass('prevon'); // set the icon when activated<br>
}<br> );</div>
<div> nav.next.events.register(<br> "activate", <br> buttonNext,<br> function() { <br> this.setDisabled(false); <br> this.setIconClass('nexton'); // set the icon when activated<br>
}</div>
<div> <br> );</div>
<div> nav.previous.events.register(<br> "deactivate", <br> buttonPrevious,<br> function() { <br> this.setDisabled(true); <br> this.setIconClass('prevoff'); // set the icon when deactivated<br>
}<br> );</div>
<div> nav.next.events.register(<br> "deactivate", <br> buttonNext,<br> function() { <br> this.setDisabled(true); <br> this.setIconClass('nextoff'); // set the icon when deactivated<br>
}<br> );</div>
<div> </div>
<div>Then I include the toolbarItems array in with the items for the tbar for my window.</div>
<div> </div>
<div>Perhaps there's a better way since I'm still a newbie at this and cobbling together someone else's work along with the setIconClass method. But like I said, works in the app I'm putting together at present. Hope folks find it useful.</div>
<div> </div>
<div>Dave M</div></div>