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

[David Miller]

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:

    var buttonNext = new Ext.Toolbar.Button({
                     iconCls: 'nextoff',
                     tooltip: *'NEXT* map view',
                     disabled: true,
                     handler: nav.next.trigger
    });

Dave
On Thu, Jul 14, 2011 at 10:11 AM, David Miller <teknocreator at gmail.com>wrote:

> 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/20110715/9daeb206/attachment-0001.htm