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

[David Miller]

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/0fab954e/attachment.htm