[Users] Getting navigation history images displayed in a toolbar. - revisited

[Matt Priour]

All the configuration stuff seems ok. However, I think you MUST add the 
NavigationHistory control to the map FIRST, before using it in a toolbar 
button.
That is what I have done in my code on several sites and it works just fine.
Also I noticed that I have '!important' added to the width & height 
properties of the CSS class used for the toolbar button iconCls.
Matt Priour
Kestrel Computer Consulting

--------------------------------------------------
From: "Phil Scadden" <p.scadden at gns.cri.nz>
Sent: Monday, September 06, 2010 6:43 PM
Cc: <users at geoext.org>
Subject: Re: [Users] Getting navigation history images displayed in a 
toolbar. - revisited

>  Back to work again and still not making this work. I have code:
>         var nav = new OpenLayers.Control.NavigationHistory();
>         var action1 = new GeoExt.Action({
>             text: "previous",
>              control: nav.previous,
>              iconCls: 'toolBarNavPrevious'
>          });
>
>          var action2 = new GeoExt.Action({
>              text: "next",
>              control: nav.next,
>              iconCls: 'toolBarNavNext'
>          });
>
> Then add to toolbar with:
>         var mapTBar = new Ext.Toolbar({
>             defaults: {
>                 scale: 'medium',
>                 iconAlign:'top'
>             },
>             items: [
>                 {
>                     xtype: 'buttongroup',
>                     title: 'Navigation',
>                     defaults: {
>                         scale: 'medium',
>                         iconAlign:'top'
>                     },
>                     items: [action1,action2,panZoomButton]
>
>                 },
>
> css  has:
> .toolBarNavPrevious {
>     background-image: url( ../images/navigation_history.png ) !important;
>     background-repeat: no-repeat;
>     background-position: 0px 0px;
>     width:  24px;
>     height: 24px;
> }
> .toolBarNavNext {
>     background-image: url( ../images/navigation_history.png) !important;
>     background-repeat: no-repeat;
>     background-position: -24px 0px;
>     width:  24px;
>     height: 24px;
> }
>
> However, what I get is only 16px buttons with text ''previous", "next"
> on top of a portion of the
> navigation_history icon.  Buttons created without actions. eg
>         panZoomButton = new Ext.Button({
>             text: 'Zoom/Pan',
>             iconCls: 'toolBarPan',
>             enableToggle: true,
>             pressed: true,
>             checked: true,
>             allowDepress: false,
>             group: "draw",
>             toggleGroup: "draw",
>             toggleHandler: function(){
>                 toggleControls("Zoom/Pan");
>             }
>         });
> beside it, are fine. When I inspect the dom element, I see in css, I see
> that button created with above code has:
> .x-btn-text-icon .x-btn-icon-medium-top .x-btn-text {
> background-position:center 0;
> background-repeat:no-repeat;
> padding-top:26px;
> }
>
> whereas the action elements are:
> .x-btn-text-icon .x-btn-icon-small-left .x-btn-text {
> background-position:0 center;
> background-repeat:no-repeat;
> height:16px;
> padding-left:18px;
> }
>
> I have no idea what properties to change to influence this behaviour.
> I've looked at action documentation at ext (which seems to be somewhat
> lacking), and no clues. Has anyone ever got this working?
>
>
> Notice: This email and any attachments are confidential. If received in 
> error please destroy and immediately notify us. Do not copy or disclose 
> the contents.
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>