git.roojs.org Git - roojs1/blob - examples/bootstrap/LocationPicker.js

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.locationpicker = new Roo.XComponent({
   6     part     :  ["layout","viewpanel"],
   7     order    : '001-viewpanel',
   8     region   : '',
   9     parent   : '#bootstrap',
  10     name     : "unnamed module",
  11     disabled : false,
  12     permname : '',
  13     _tree : function()
  14     {
  15
  16         this.parent = {
  17             el : new Roo.bootstrap.Body()
  18         }
  19         this.parent.el.layout = false;
  20         this.parent.el.render(document.body);
  21
  22         var _this = this;
  23         var MODULE = this;
  24
  25         return {
  26             xtype: 'Body',
  27             xns: Roo.bootstrap,
  28             items :
  29             [
  30                 {
  31                     xtype : 'Container',
  32                     xns : Roo.bootstrap,
  33                     items : [
  34                         {
  35                             xtype : 'LocationPicker',
  36                             xns: Roo.bootstrap,
  37                             style : 'width:500px; height: 400px; border: 1px solid #000;margin:50px auto;',
  38                             latitude : 46.15242437752303,
  39                             longitude : 2.7470703125,
  40                             listeners : {
  41                                 render : function (_self) {
  42                                     _this.picker = _self;
  43                                 },
  44                                 positionchanged : function (_self, location) {
  45                                     if(_this.latitude){
  46                                         _this.latitude.setValue(location.lat());
  47                                     }
  48
  49                                     if(_this.longitude){
  50                                         _this.longitude.setValue(location.lng());
  51                                     }
  52                                 }
  53                             }
  54                         }
  55                     ]
  56                 },
  57                 {
  58                     xtype : 'Container',
  59                     xns : Roo.bootstrap,
  60                     style : 'margin:auto;',
  61                     items : [
  62                         {
  63                             xtype : 'Column',
  64                             xns: Roo.bootstrap,
  65                             md : 3,
  66                             items : [
  67                                 {
  68                                     xtype : 'Input',
  69                                     xns: Roo.bootstrap,
  70                                     fieldLabel : 'Latitude',
  71                                     labelAlign : 'top',
  72                                     listeners : {
  73                                         render : function (_self) {
  74                                             _this.latitude = _self;
  75                                         }
  76                                     }
  77                                 }
  78                             ]
  79                         },
  80                         {
  81                             xtype : 'Column',
  82                             xns: Roo.bootstrap,
  83                             md : 3,
  84                             items : [
  85                                 {
  86                                     xtype : 'Input',
  87                                     xns: Roo.bootstrap,
  88                                     fieldLabel : 'Longitude',
  89                                     labelAlign : 'top',
  90                                     listeners : {
  91                                         render : function (_self) {
  92                                             _this.longitude = _self;
  93                                         }
  94                                     }
  95                                 }
  96                             ]
  97                         }
  98                     ]
  99                 }
 100             ]
 101         }
 102     }
 103 });