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