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