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

[Phil Scadden]

  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.