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" <[email protected]> Sent: Monday, September 06, 2010 6:43 PM Cc: <[email protected]> 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 > [email protected] > http://www.geoext.org/cgi-bin/mailman/listinfo/users > _______________________________________________ Users mailing list [email protected] http://www.geoext.org/cgi-bin/mailman/listinfo/users
