BTW, Peter Jehle emailed me and let me know of his solution:
Hi Dave
I use this code for the button contol. In the css, you have to define a
class "back" und "next" that way:
.back {
background-image: url("/geoportal/img/resultset_previous.png")
!important;
height: 20px !important;
width: 20px !important;
}
I just have one style for the button, the rest should be handled by ext
(depressed or not)
ctrl = new OpenLayers.Control.NavigationHistory();
map.addControl(ctrl);
action = new GeoExt.Action({
control: ctrl.previous,
disabled: true,
tooltip: "Vorheriger Ausschnitt",
iconCls: 'back'
});
toolbarItems.push(action);
action = new GeoExt.Action({
control: ctrl.next,
disabled: true,
tooltip: "Nächster Ausschnitt",
iconCls: 'next'
});
toolbarItems.push(action);
toolbarItems.push("-");
Regards
Peter
-----------------------------------
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.
Still, a couple of options now for the app I'm working on. Thanks Peter!
Dave
On Thu, Jul 14, 2011 at 8:53 AM, David Miller <teknocrea...@gmail.com>wrote:
> Good day list!
>
> 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.
>
> - For the css, these are the OL images ('scripts' is a local directory,
> but the rest should be in the OL theme directory)
>
> <style type="text/css">
> .prevon {
> background-image: url(scripts/theme/default/img/view_previous_on.png)
> !important;
> background: no-repeat;
> width: 24px !important;
> height: 24px !important;
> }
> .prevoff {
> background-image: url(scripts/theme/default/img/view_previous_off.png)
> !important;
> background: no-repeat;
> width: 24px !important;
> height: 24px !important;
> }
> .nexton {
> background-image: url(scripts/theme/default/img/view_next_on.png)
> !important;
> background: no-repeat;
> width: 24px !important;
> height: 24px !important;
> }
> .nextoff {
> background-image: url(scripts/theme/default/img/view_next_off.png)
> !important;
> background: no-repeat;
> width: 24px !important;
> height: 24px !important;
> }
> </style>
> 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.
>
> var toolbarItems = [];
>
> toolbarItems.push("-");
>
> // Navigation history - two "button" controls
>
> var nav = new OpenLayers.Control.NavigationHistory({id:"navhist"});
> // id is optional, I refer to it in my code elsewhere
> map.addControl(nav);
> nav.activate();
>
> // initially disabled
> var buttonPrevious = new Ext.Toolbar.Button({
> iconCls: 'prevoff',
> tooltip: 'Previous map view',
> disabled: true,
> handler: nav.previous.trigger
> });
> var buttonNext = new Ext.Toolbar.Button({
> iconCls: 'nextoff',
> tooltip: 'Previous map view',
> disabled: true,
> handler: nav.next.trigger
> });
>
> // add to toolbarItems
>
> toolbarItems.push(buttonPrevious);
> toolbarItems.push(buttonNext);
>
> // register activate and deactivate events for both buttons
>
> nav.previous.events.register(
> "activate",
> buttonPrevious,
> function() {
> this.setDisabled(false);
> this.setIconClass('prevon'); // set the icon when activated
> }
> );
> nav.next.events.register(
> "activate",
> buttonNext,
> function() {
> this.setDisabled(false);
> this.setIconClass('nexton'); // set the icon when activated
> }
>
> );
> nav.previous.events.register(
> "deactivate",
> buttonPrevious,
> function() {
> this.setDisabled(true);
> this.setIconClass('prevoff'); // set the icon when deactivated
> }
> );
> nav.next.events.register(
> "deactivate",
> buttonNext,
> function() {
> this.setDisabled(true);
> this.setIconClass('nextoff'); // set the icon when deactivated
> }
> );
>
> Then I include the toolbarItems array in with the items for the tbar for my
> window.
>
> 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.
>
> Dave M
>
_______________________________________________
Users mailing list
Users@geoext.org
http://www.geoext.org/cgi-bin/mailman/listinfo/users
