[Users] Adding OL navigation history with button icons to toolbar

[David Miller]

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 <teknocreator at 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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20110714/19192c41/attachment-0001.htm