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