<div>One correction to my code as I was probably cutting and pasting here. The buttonNext tooltip should, of course, refer to itself instead of the buttonPrevious:</div>
<div> </div>
<div> var buttonNext = new Ext.Toolbar.Button({<br> iconCls: 'nextoff',<br> tooltip: <strong>'NEXT</strong> map view', <br> disabled: true,<br>
handler: nav.next.trigger<br> });</div>
<p>Dave</p>
<div>On Thu, Jul 14, 2011 at 10:11 AM, David Miller <span dir="ltr"><<a href="mailto:teknocreator@gmail.com">teknocreator@gmail.com</a>></span> wrote:<br></div>
<div class="gmail_quote">
<blockquote style="BORDER-LEFT: #ccc 1px solid; MARGIN: 0px 0px 0px 0.8ex; PADDING-LEFT: 1ex" class="gmail_quote">
<div>BTW, Peter Jehle emailed me and let me know of his solution:</div>
<div class="im">
<div> </div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span>Hi Dave</span></font></font></font></div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span>I use this code for the button contol. In the css, you have to define a class "back" und "next" that way:</span></font></font></font></div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span></span></font></font></font> </div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span>
<div>
<div><span>.back</span> {</div>
<div>
<div>
<div><span> </span><span>background-image</span><span>: </span><span>url("/geoportal/img/resultset_previous.png") !important</span><span>;</span></div>
<div><span> </span><span>height</span><span>: </span><span>20px !important</span><span>;</span></div>
<div><span> </span><span>width</span><span>: </span><span>20px !important</span><span>;</span></div></div></div>
<div>}</div></div></span></font></font></font></div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span></span></font></font></font> </div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span>I just have one style for the button, the rest should be handled by ext (depressed or not)</span></font></font></font></div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span></span></font></font></font> </div>
<div dir="ltr" align="left"><font face="Arial"><font color="#0000ff"><font size="2"><span></span> </font></font></font></div>
<div dir="ltr" align="left"><font color="#0000ff" size="2" face="Arial"> ctrl = new OpenLayers.Control.NavigationHistory();<br> map.addControl(ctrl);<br> <br> action = new GeoExt.Action({<br> control: ctrl.previous,<br>
disabled: true,<br> tooltip: "Vorheriger Ausschnitt",<br> iconCls: 'back'<br> });<br> toolbarItems.push(action);<br> <br> action = new GeoExt.Action({<br>
control: ctrl.next,<br> disabled: true,<br> tooltip: "Nächster Ausschnitt",<br> iconCls: 'next'<br> });<br> toolbarItems.push(action);<br>
toolbarItems.push("-"); </font></div>
<div> </div>
<div><font color="#0000ff" size="2" face="Arial"></font> </div>
<div><span><font color="#0000ff" size="2" face="Arial">Regards</font></span></div>
<div><span><font color="#0000ff" size="2" face="Arial">Peter</font></span></div></div>
<div><span><font color="#0000ff">-----------------------------------</font></span></div>
<div>And this works just fine as well as Peter is correct in that Ext will dull the previous and next icons when they're deactivated. I had thought I tried this way as well after looking at setting the iconCls when creating the action. But, I was focused more on how to change the icon class itself when the button was activated or deactivated like the example in OpenLayers displayed.</div>
<div> </div>
<div>Still, a couple of options now for the app I'm working on. Thanks Peter!</div>
<div> </div>
<div>Dave<br><br></div>
<div>
<div></div>
<div class="h5">
<div class="gmail_quote">On Thu, Jul 14, 2011 at 8:53 AM, David Miller <span dir="ltr"><<a href="mailto:teknocreator@gmail.com" target="_blank">teknocreator@gmail.com</a>></span> wrote:<br>
<blockquote style="BORDER-LEFT: #ccc 1px solid; MARGIN: 0px 0px 0px 0.8ex; PADDING-LEFT: 1ex" class="gmail_quote">
<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></blockquote></div><br></div></div></blockquote></div><br>