1 files changed, 184 insertions, 0 deletions
diff --git a/misc/openlayers/examples/mobile-sencha.html b/misc/openlayers/examples/mobile-sencha.html
new file mode 100644
index 0000000..3b491b2
--- /dev/null
+++ b/misc/openlayers/examples/mobile-sencha.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+        <meta name="apple-mobile-web-app-capable" content="yes"/>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <title>OpenLayers with Sencha Touch</title>
+        <script src="../lib/OpenLayers.js?mobile"></script>
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
+        <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
+        <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
+        <script src="mobile-sencha.js"></script>
+        <script src="mobile-base.js"></script>
+        <style>
+            .searchList {
+                min-height: 150px;
+            }
+
+            .close-btn {
+                position: absolute;
+                right: 10px;
+                top: 10px;
+            }
+
+            img.minus {
+                -webkit-mask-image: url(img/minus1.png);
+            }
+
+            img.layers {
+                -webkit-mask-image: url(img/list.png);
+            }
+
+            .gx-layer-item {
+                margin-left: 10px;
+            }
+
+            #map {
+                width: 100%;
+                height: 100%;
+            }
+
+            .olControlAttribution {
+                font-size: 10px;
+                bottom: 5px;
+                right: 5px;
+            }
+
+            #title, #tags, #shortdesc {
+                display: none;
+            }
+        </style>
+        <script>
+
+        var app = new Ext.Application({
+            name: "ol",
+            launch: function() {
+                this.viewport = new Ext.Panel({
+                    fullscreen: true,
+                    dockedItems: [{
+                        dock: "bottom",
+                        xtype: "toolbar",
+                        ui: "light",
+                        layout: {
+                            pack: "center"
+                        },
+                        items: [{
+                            iconCls: "search",
+                            iconMask: true,
+                            handler: function() {
+                                // this is the app
+                                if (!app.searchFormPopupPanel) {
+                                    app.searchFormPopupPanel = new App.SearchFormPopupPanel({
+                                        map: map
+                                    });
+                                }
+                                app.searchFormPopupPanel.show('pop');
+                            }
+                        }, {
+                            iconCls: "locate",
+                            iconMask: true,
+                            handler: function() {
+                                var geolocate = map.getControlsBy("id", "locate-control")[0];
+                                if (geolocate.active) {
+                                    geolocate.getCurrentLocation();
+                                } else {
+                                    geolocate.activate();
+                                }
+                            }
+                        }, {
+                            xtype: "spacer"
+                        }, {
+                            iconMask: true,
+                            iconCls: "add",
+                            handler: function() {
+                                map.zoomIn();
+                            }
+                        }, {
+                            iconMask: true,
+                            iconCls: "minus",
+                            handler: function() {
+                                map.zoomOut();
+                            }
+                        }, {
+                            xtype: "spacer"
+                        }, {
+                            iconMask: true,
+                            iconCls: "layers",
+                            handler: function() {
+                                if (!app.popup) {
+                                    app.popup = new Ext.Panel({
+                                        floating: true,
+                                        modal: true,
+                                        centered: true,
+                                        hideOnMaskTap: true,
+                                        width: 240,
+                                        items: [{
+                                            xtype: 'app_layerlist',
+                                            map: map
+                                        }],
+                                        scroll: 'vertical'
+                                    });
+                                }
+                                app.popup.show('pop');
+                            }
+                        }]
+                    }],
+                    items: [
+                        {
+                            xtype: "component",
+                            scroll: false,
+                            monitorResize: true,
+                            id: "map",
+                            listeners: {
+                                render: function() {
+                                    var self = this;
+                                    init(function(feature) {
+                                        var htmlContent = "";
+                                        for (var property in feature.data) {
+                                            if (feature.data[property] != 'undefined') {
+                                                htmlContent = htmlContent + feature.data[property] + "<br>";
+                                            }
+                                        }
+                                        if (self.featurePopup) {
+                                            self.featurePopup.destroy();
+                                        }
+                                        self.featurePopup = new Ext.Panel({
+                                            floating: true,
+                                            modal: true,
+                                            centered: true,
+                                            hideOnMaskTap: true,
+                                            width: 240,
+                                            html: htmlContent,
+                                            scroll: 'vertical'
+                                        });
+                                        self.featurePopup.show();
+                                    })
+                                },
+                                resize: function() {
+                                    if (window.map) {
+                                        map.updateSize();
+                                    }
+                                },
+                                scope: {
+                                    featurePopup: null
+                                }
+                            }
+                        }
+                    ]
+                });
+            }
+        });
+        </script>
+    </head>
+    <body>
+        <h1 id="title">OpenLayers with Sencha Touch</h1>
+
+        <div id="tags">
+            mobile, sencha touch
+        </div>
+        <p id="shortdesc">
+            Using Sencha Touch to display an OpenLayers map.
+        </p>
+    </body>
+</html>