git.roojs.org Git - roojs1/blob - examples/dialog/uploadCropbox.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 : 700,
  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                             outputMaxWidth : 1200,
  40                             windowSize : 300,
  41                             url: 'http://localhost/web.MediaOutreach/press.local.php/Roo/Images.php',
  42                             buttons: [],
  43                             listeners : {
  44                                 render : function (_self)
  45                                 {
  46                                     _this.cropbox = _self;
  47                                 },
  48                                 loadcanvas : function (_self, imageEl)
  49                                 {
  50                                     if(imageEl.OriginWidth < 720) {
  51                                         Roo.Msg.show({
  52                                             title: 'Error',
  53                                             msg: "Image width should be at least 720",
  54                                             buttons: {ok : true},
  55                                             fn: function(res) {
  56                                                 _this.cropbox.selectorEl.dom.value = '';
  57                                                 _this.cropbox.selectorEl.dom.click();
  58                                             }
  59                                         });
  60                                         return false;
  61                                     }
  62                                 },
  63                                 arrange : function (_self, formData)
  64                                 {
  65                                     formData.append("onid", "43024");
  66                                     formData.append("ontable", "pressrelease_boilerplate");
  67                                 }
  68                             }
  69                         }
  70                     ]
  71                 }
  72             ],
  73             buttons : [
  74                 {
  75                     xtype : 'Button',
  76                     xns : Roo,
  77                     text : 'Save',
  78                     listeners : {
  79                         click : function () {
  80                             _this.cropbox.crop();
  81                             _this.dialog.hide();
  82                         }
  83                     }
  84                 },
  85                 {
  86                     xtype : 'Button',
  87                     xns : Roo,
  88                     text : 'Cancel',
  89                     listeners : {
  90                         click : function () {
  91                             _this.dialog.hide();
  92                         }
  93                     }
  94                 }
  95             ]
  96         });
  97     }
  98 }
  99
 100 var test = {
 101
 102     dialog : false,
 103     callback : false,
 104
 105     show : function(data, cb)
 106     {
 107         if (!this.dialog) {
 108             this.create();
 109         }
 110
 111         this.callback = cb;
 112         this.data = data;
 113         this.dialog.show();
 114     },
 115
 116     create : function()
 117     {
 118         var _this = this;
 119         this.dialog = Roo.factory({
 120             xns : Roo,
 121             xtype : 'LayoutDialog',
 122             width : 600,
 123             height : 450,
 124             center : {
 125                 xns : Roo,
 126                 xtype : 'LayoutRegion'
 127             },
 128             items : [
 129                 {
 130                     xns : Roo,
 131                     xtype: 'GridPanel',
 132                     region : "center",
 133                     grid : {
 134                         xns : Roo.grid,
 135                         xtype : 'Grid',
 136                         cm : [
 137                             {
 138                                 xns : Roo.grid,
 139                                 xtype : 'ColumnModel',
 140                                 header : 'test'
 141                             }
 142                         ],
 143                         ds : {
 144                             xns: Roo.data,
 145                             xtype: 'Store'
 146                         },
 147                         toolbar : {
 148                             xns: Roo,
 149                             xtype: 'Toolbar',
 150                             items : [
 151                                 {
 152                                     xtype : 'Button',
 153                                     text : 'Add',
 154                                     listeners : {
 155                                         click : function () {
 156                                             uploadCropbox.show();
 157                                             document.body.onfocus = function(e) {
 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     });
 180 });