PDA

View Full Version : floating a button on a map



jep
27 Sep 2010, 1:31 PM
I'm floating a button over a map control and have a few questions.



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title id="title">Loading test</title>

<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript" src="../ext-touch-debug.js"></script>

<script type="text/javascript">
Ext.setup({
onReady: function() {

var btn = new Ext.Button({
x:100,
y:100,
iconCls:'refresh',
iconMask:true,
ui:'plain',
style:'position:absolute',
handler:function() { window.location.reload(); }
});

var map = new Ext.Map({
});

var mainPanel = new Ext.Panel({
fullscreen: true,
items:[map, btn]
});
}
});
</script>

</head>

<body></body>

</html>


First off, is this even a good way to do it? By this I mean things like "position:absolute", specifying x/y, etc. Is there a more Sencha Touch-y way of doing it?

Second, this results in a black icon. Is there an easy-ish way to make it white (or any color) that still lets me use the stock icons rather than adding my own?

Third, is there a good way in code to position it all the way at the bottom/right side of the screen? I mean such that its right side would touch the right side of the screen and bottom would touch the bottom.

Gracias!

evant
27 Sep 2010, 3:31 PM
Something like this:



Ext.setup({
onReady: function(){

var btn = new Ext.Button({
x: 100,
y: 100,
iconCls: 'refresh',
iconMask: true,
ui: 'plain',
floating: true,
handler: function(){
window.location.reload();
}
}).show();
var box = Ext.getBody().getBox(),
size = btn.getSize();

btn.setPosition(box.right - size.width, box.bottom - size.height);
var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [new Ext.Map({})]
});
}
});

jep
27 Sep 2010, 9:17 PM
Once again, thanks! But I find that I get some curious results using your code. The first is when "ui:'plain'" is in, the second is when it's commented out:

22577

22576

The second one seems to actually be what I would think the code does - put it right in the corner. I don't want the button background, though. The first one has the look I want, but puts it offset for some reason. Any idea?

Also, any idea on making the icon white or gray instead of black?

(FYI, this is Safari 5.0.2 on XP)

evant
27 Sep 2010, 9:42 PM
The ui changes the css, so it's off by a bit, so modify the offsets accordingly. As for making it white, you'd need to modify the css.

jep
28 Sep 2010, 7:10 AM
Yeah, thought of that, but ran into another snag. I tried something like this:


btn.setPosition(box.right - size.width + 9, box.bottom - size.height + 28);
Any values >= 9 and >=28 cause this white border strip to appear:

22587