git.roojs.org Git - roojs1/blob - examples/dialog/test-2.js

   1 var uploadCropbox = {
   2     dialog : false,
   3     callback : false,
   4
   5     show : function(data, cb)
   6     {
   7         if (!this.dialog) {
   8             this.create();
   9         }
  10
  11         this.callback = cb;
  12         this.data = data;
  13         this.dialog.show();
  14     },
  15
  16     create : function()
  17     {
  18         var _this = this;
  19         this.dialog = Roo.factory({
  20             xns : Roo,
  21             xtype : 'LayoutDialog',
  22             width : 800,
  23             height : 600,
  24             center : {
  25                 xns : Roo,
  26                 xtype : 'LayoutRegion'
  27             },
  28             items : [
  29                 {
  30                     xtype: 'ContentPanel',
  31                     xns: Roo,
  32                     region : "center",
  33                     items : [
  34                         {
  35                             xtype : 'UploadCropbox',
  36                             xns : Roo.dialog,
  37                             minWidth : 720,
  38                             minHeight: 480,
  39                             buttons: [
  40                                 {
  41                                     tag : 'div',
  42                                     cls : 'btn-group roo-upload-cropbox-picture',
  43                                     action : 'picture',
  44                                     cn : [
  45                                         {
  46                                             tag : 'button',
  47                                             cls : 'btn btn-default',
  48                                             html : '<i class="fa fa-picture-o"></i>'
  49                                         }
  50                                     ]
  51                                 }
  52                             ],
  53                             listeners : {
  54                                 render : function (_self)
  55                                 {
  56                                     console.log("RENDER");
  57                                     _this.cropbox = _self;
  58                                 },
  59                                 loadcanvas : function (_self, imageEl)
  60                                 {
  61                                     console.log("LOADCANVAS");
  62                                     console.log(_self);
  63                                     console.log(imageEl);
  64                                     if(imageEl.OriginWidth < 720) {
  65                                         console.log("Image width should be at least 720");
  66                                         return false;
  67                                     }
  68                                 }
  69                             }
  70                         }
  71                     ]
  72                 }
  73             ],
  74             buttons : [
  75                 {
  76                     xtype : 'Button',
  77                     xns : Roo,
  78                     text : 'Save',
  79                     listeners : {
  80                         click : function () {
  81                         }
  82                     }
  83                 },
  84                 {
  85                     xtype : 'Button',
  86                     xns : Roo,
  87                     text : 'Cancel',
  88                     listeners : {
  89                         click : function () {
  90                             _this.dialog.hide()
  91                         }
  92                     }
  93                 }
  94             ]
  95         });
  96     }
  97 }
  98
  99 var test = {
 100
 101     dialog : false,
 102     callback : false,
 103
 104     show : function(data, cb)
 105     {
 106         if (!this.dialog) {
 107             this.create();
 108         }
 109
 110         this.callback = cb;
 111         this.data = data;
 112         this.dialog.show();
 113     },
 114
 115     create : function()
 116     {
 117         var _this = this;
 118         this.dialog = Roo.factory({
 119             xns : Roo,
 120             xtype : 'LayoutDialog',
 121             width : 600,
 122             height : 450,
 123             center : {
 124                 xns : Roo,
 125                 xtype : 'LayoutRegion'
 126             },
 127             items : [
 128                 {
 129                     xns : Roo,
 130                     xtype: 'GridPanel',
 131                     region : "center",
 132                     grid : {
 133                         xns : Roo.grid,
 134                         xtype : 'Grid',
 135                         cm : [
 136                             {
 137                                 xns : Roo.grid,
 138                                 xtype : 'ColumnModel',
 139                                 header : 'test'
 140                             }
 141                         ],
 142                         ds : {
 143                             xns: Roo.data,
 144                             xtype: 'Store'
 145                         },
 146                         toolbar : {
 147                             xns: Roo,
 148                             xtype: 'Toolbar',
 149                             items : [
 150                                 {
 151                                     xtype : 'Button',
 152                                     text : 'Add',
 153                                     listeners : {
 154                                         click : function () {
 155                                             uploadCropbox.show();
 156                                             document.body.onfocus = function(e) {
 157                                                 document.body.onfocus = null;
 158                                                 if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
 159                                                     uploadCropbox.dialog.hide();
 160                                                 }
 161                                             }
 162                                             uploadCropbox.cropbox.selectorEl.dom.click();
 163                                         }
 164                                     }
 165                                 }
 166                             ]
 167                         }
 168                     }
 169                 }
 170             ],
 171         });
 172     }
 173 }
 174
 175 Roo.onReady(function() {
 176
 177     Roo.get('show-dialog-btn').on('click',function () {
 178         test.show({});
 179         console.log(test);
 180     });
 181 });