git.roojs.org Git - Pman.BAdmin/blob - Pman.Dialog.BAdminImageManager.js

   1 //<script type="text/javascript">
   2
   3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
   4
   5 Roo.namespace('Pman.Dialog');
   6
   7 Pman.Dialog.BAdminImageManager= function() {}
   8 Roo.apply(Pman.Dialog.BAdminImageManager.prototype, {
   9
  10  _strings : {
  11   'ef797d5638c2e1c6b6225b2247541ea5' :"Upload Image or File:",
  12   'd9787032e54a7facd5c7b1db2ae61c7b' :"Image Manager",
  13   '53ab4599d0106e32d015649175a70d7b' :"<i class=\"fa fa-filter\"></i> Filter",
  14   '37c1097cf82226d511586ecd99ed97cf' :"search for image",
  15   'cdb6b6bab1fd18b9dbfe3fb84a5d34ae' :"<i class=\"fa fa-search\"></i>",
  16   '5350277f16d9998c57fa7e1d17be2a76' :"<i class=\"fa fa-upload\"></i> Upload Image",
  17   '14834a16229091f47cf1810177d07916' :"Created Date:",
  18   '1a0ce561842e3caef9098f46ecaa1dcf' :"Add Images with Settings",
  19   '78d0f5aac952e2ce840a381976a3b01e' :"Image Details",
  20   '708ea0e601087e73c4764d5086e3ea3c' :"File Name:",
  21   'e0a53da57dd79cca5d3b6a7c42e463ef' :"File Type:",
  22   '3f986fa4066f6bded1376eb69de18da2' :"File Size:",
  23   '179d4ab94c43ccb7cd6d2b3d82c7fe1f' :"Show images for this email",
  24   'd3d2e617335f08df83599665eef8a418' :"Close",
  25   '84378f54966381befd040dafbdc221d6' :"<i class=\"fa fa-plus\"></i> Add into the email",
  26   '361bacb1a72a350ee34e2f31a6a91dab' :"Alignment:",
  27   '2cd3a1900dd0060540b418b2a60f6eec' :"Show all images",
  28   'ed807858fcb68abdd180481f1fcba5c5' :"<i class=\"fa fa-trash\"></i> Delete",
  29   '031fa343a28d221a25d2bcd942437174' :"Alternate Text:",
  30   '48ccf48dcf2218a413ce473262f21a0c' :"Width: ",
  31   'd0042a700e9bdf79689d63ee6846dc0e' :"Description:",
  32   'd6d93f0d6b7c6018d8949e73ed6efb6c' :"<i class=\"fa fa-save\"></i> Save Changes",
  33   'e933dc24fb245d863a43b4fefe9b45f5' :"Height:"
  34  },
  35  _named_strings : {
  36   'align_fieldLabel' : '361bacb1a72a350ee34e2f31a6a91dab' /* Alignment: */ ,
  37   'filename_fieldLabel' : '708ea0e601087e73c4764d5086e3ea3c' /* File Name: */ ,
  38   'add_html' : '84378f54966381befd040dafbdc221d6' /* <i class="fa fa-plus"></i> Add into the email */ ,
  39   'created_fieldLabel' : '14834a16229091f47cf1810177d07916' /* Created Date: */ ,
  40   'height_fieldLabel' : 'e933dc24fb245d863a43b4fefe9b45f5' /* Height: */ ,
  41   'mimetype_fieldLabel' : 'e0a53da57dd79cca5d3b6a7c42e463ef' /* File Type: */ ,
  42   'close_html' : 'd3d2e617335f08df83599665eef8a418' /* Close */ ,
  43   'imageUpload_fieldLabel' : 'ef797d5638c2e1c6b6225b2247541ea5' /* Upload Image or File: */ ,
  44   'width_fieldLabel' : '48ccf48dcf2218a413ce473262f21a0c' /* Width:  */ ,
  45   'filesize_fieldLabel' : '3f986fa4066f6bded1376eb69de18da2' /* File Size: */ ,
  46   'descript_fieldLabel' : 'd0042a700e9bdf79689d63ee6846dc0e' /* Description: */
  47  },
  48
  49  dialog : false,
  50  callback:  false,
  51
  52  show : function(data, cb)
  53  {
  54   if (!this.dialog) {
  55    this.create();
  56   }
  57
  58   this.callback = cb;
  59   this.data = data;
  60   this.dialog.show(this.data._el);
  61   if (this.form) {
  62    this.form.reset();
  63    this.form.setValues(data);
  64    this.form.fireEvent('actioncomplete', this.form,  { type: 'setdata', data: data });
  65   }
  66
  67  },
  68
  69  create : function()
  70  {
  71   var _this = this;
  72   this.dialog = Roo.factory({
  73     xtype : 'Modal',
  74     cls : 'modal-body-enable-overflow-y pman-badmin-image-manager',
  75     fitwindow : true,
  76     title : _this._strings['d9787032e54a7facd5c7b1db2ae61c7b'] /* Image Manager */,
  77     listeners : {
  78      resize : function (_self)
  79       {
  80           if (_this.dialog && _this.container && _this.toolbar) {
  81
  82               _this.document_container.el.setHeight(
  83                   _this.dialog.bodyEl.getHeight() -
  84                   _this.dialog.headerEl.getHeight() -
  85                   _this.toolbar.el.dom.offsetHeight -
  86                   _this.dialog.footerEl.getHeight()
  87               );
  88
  89           }
  90       }
  91     },
  92     xns : Roo.bootstrap,
  93     '|xns' : 'Roo.bootstrap',
  94     buttons : [
  95      {
  96       xtype : 'Button',
  97       html : _this._strings['d3d2e617335f08df83599665eef8a418'] /* Close */,
  98       name : 'close',
  99       weight : 'default',
 100       listeners : {
 101        click : function (_self, e)
 102         {
 103             _this.dialog.hide();
 104         }
 105       },
 106       xns : Roo.bootstrap,
 107       '|xns' : 'Roo.bootstrap'
 108      }
 109     ],
 110     items  : [
 111      {
 112       xtype : 'Row',
 113       xns : Roo.bootstrap,
 114       '|xns' : 'Roo.bootstrap',
 115       items  : [
 116        {
 117         xtype : 'Column',
 118         md : 12,
 119         listeners : {
 120          render : function (_self)
 121           {
 122               _this.masonryBlock = this;
 123           }
 124         },
 125         xns : Roo.bootstrap,
 126         '|xns' : 'Roo.bootstrap',
 127         items  : [
 128          {
 129           xtype : 'Form',
 130           fileUpload : true,
 131           method : 'POST',
 132           style : 'display: none;',
 133           timeout : 300,
 134           url : baseURL + '/Roo/Images.php',
 135           listeners : {
 136            actioncomplete : function(_self,action)
 137             {
 138                 if (action.type == 'setdata') {
 139
 140                     _this.showType = 'public';
 141
 142                     this.url = _this.data._url ? baseURL + _this.data._url : baseURL + '/Roo/Images.php';
 143
 144                     this.el.dom.action = this.url;
 145
 146                     if (typeof(_this.data.timeout) != 'undefined') {
 147                         this.timeout = _this.data.timeout;
 148                     }
 149
 150                     this.findField('UPLOAD_IDENTIFIER').setValue(
 151                         (new Date() * 1) + '' + Math.random());
 152
 153                     _this.masonry.load();
 154
 155                     return;
 156                 }
 157
 158
 159                 if (action.type == 'load') {
 160
 161                     _this.data = action.result.data;
 162
 163                     return;
 164                 }
 165
 166
 167                 if (action.type == 'submit') { // only submitted here if we are
 168
 169                     _this.masonry.load();
 170
 171                     return;
 172                 }
 173
 174
 175
 176             },
 177            actionfailed : function (_self, action)
 178             {
 179                 if (action.type == 'submit') {
 180                     Roo.log("Upload error");
 181                     Roo.log(action);
 182
 183                     try {
 184
 185                         Roo.MessageBox.alert("Error", action.result.errorMsg.split(/\n/).join('<BR/>'));
 186
 187                     } catch(e) {
 188
 189                         Roo.MessageBox.alert("Error", "Saving failed = fix errors and try again");
 190                     }
 191                     return;
 192                 }
 193
 194                 Roo.MessageBox.alert("Error", "Error loading details");
 195             },
 196            render : function (_self)
 197             {
 198                 _this.form = this;
 199
 200             }
 201           },
 202           xns : Roo.bootstrap,
 203           '|xns' : 'Roo.bootstrap',
 204           items  : [
 205            {
 206             xtype : 'Input',
 207             fieldLabel : _this._strings['ef797d5638c2e1c6b6225b2247541ea5'] /* Upload Image or File: */,
 208             inputType : 'file',
 209             labelWidth : 4,
 210             name : 'imageUpload',
 211             listeners : {
 212              render : function (_self)
 213               {
 214                   _this.uploadDL = this;
 215
 216                   _this.uploadDL.inputEl().on("change",function(){
 217
 218                       _this.form.findField('onid').setValue((_this.showType == 'private') ? _this.data.onid : 0);
 219                       _this.form.doAction('submit');
 220                   });
 221
 222
 223               }
 224             },
 225             xns : Roo.bootstrap,
 226             '|xns' : 'Roo.bootstrap'
 227            },
 228            {
 229             xtype : 'Input',
 230             inputType : 'hidden',
 231             name : 'UPLOAD_IDENTIFIER',
 232             xns : Roo.bootstrap,
 233             '|xns' : 'Roo.bootstrap'
 234            },
 235            {
 236             xtype : 'Input',
 237             inputType : 'hidden',
 238             name : 'post_max_size',
 239             xns : Roo.bootstrap,
 240             '|xns' : 'Roo.bootstrap'
 241            },
 242            {
 243             xtype : 'Input',
 244             inputType : 'hidden',
 245             name : 'upload_max_filesize',
 246             xns : Roo.bootstrap,
 247             '|xns' : 'Roo.bootstrap'
 248            },
 249            {
 250             xtype : 'Input',
 251             inputType : 'hidden',
 252             name : 'ontable',
 253             xns : Roo.bootstrap,
 254             '|xns' : 'Roo.bootstrap'
 255            },
 256            {
 257             xtype : 'Input',
 258             inputType : 'hidden',
 259             name : 'onid',
 260             xns : Roo.bootstrap,
 261             '|xns' : 'Roo.bootstrap'
 262            },
 263            {
 264             xtype : 'Input',
 265             inputType : 'hidden',
 266             name : 'id',
 267             xns : Roo.bootstrap,
 268             '|xns' : 'Roo.bootstrap'
 269            }
 270           ]
 271          },
 272          {
 273           xtype : 'Container',
 274           cls : 'col-md-12',
 275           listeners : {
 276            render : function (_self)
 277             {
 278                 _this.container = this;
 279
 280             }
 281           },
 282           xns : Roo.bootstrap,
 283           '|xns' : 'Roo.bootstrap',
 284           items  : [
 285            {
 286             xtype : 'Row',
 287             listeners : {
 288              render : function (_self)
 289               {
 290                   _this.toolbar = this;
 291               }
 292             },
 293             xns : Roo.bootstrap,
 294             '|xns' : 'Roo.bootstrap',
 295             items  : [
 296              {
 297               xtype : 'Column',
 298               md : 8,
 299               sm : 12,
 300               xns : Roo.bootstrap,
 301               '|xns' : 'Roo.bootstrap',
 302               items  : [
 303                {
 304                 xtype : 'Button',
 305                 html : _this._strings['53ab4599d0106e32d015649175a70d7b'] /* <i class="fa fa-filter"></i> Filter */,
 306                 xns : Roo.bootstrap,
 307                 '|xns' : 'Roo.bootstrap',
 308                 menu : {
 309                  xtype : 'Menu',
 310                  xns : Roo.bootstrap,
 311                  '|xns' : 'Roo.bootstrap',
 312                  items  : [
 313                   {
 314                    xtype : 'MenuItem',
 315                    html : _this._strings['179d4ab94c43ccb7cd6d2b3d82c7fe1f'] /* Show images for this email */,
 316                    isContainer : false,
 317                    preventDefault : true,
 318                    listeners : {
 319                     click : function (_self, e)
 320                      {
 321                          _this.showType = 'private';
 322
 323                          _this.masonry.load();
 324                      }
 325                    },
 326                    xns : Roo.bootstrap,
 327                    '|xns' : 'Roo.bootstrap'
 328                   },
 329                   {
 330                    xtype : 'MenuItem',
 331                    html : _this._strings['2cd3a1900dd0060540b418b2a60f6eec'] /* Show all images */,
 332                    isContainer : false,
 333                    preventDefault : true,
 334                    listeners : {
 335                     click : function (_self, e)
 336                      {
 337                          _this.showType = 'public';
 338
 339                          _this.masonry.load();
 340                      }
 341                    },
 342                    xns : Roo.bootstrap,
 343                    '|xns' : 'Roo.bootstrap'
 344                   }
 345                  ]
 346                 }
 347                },
 348                {
 349                 xtype : 'Input',
 350                 placeholder : _this._strings['37c1097cf82226d511586ecd99ed97cf'] /* search for image */,
 351                 style : 'width: 200px; margin-left: 15px;display: inline-block; margin-bottom: 0px; vertical-align: middle;',
 352                 listeners : {
 353                  render : function (_self)
 354                   {
 355                       _this.searchBox = this;
 356                   },
 357                  specialkey : function (_self, e)
 358                   {
 359
 360                       var image_name = "";
 361
 362                       if(e.keyCode == e.ENTER) {
 363                           _this.masonry.clearAll();
 364                           _this.masonry.load();
 365
 366                       }
 367                   }
 368                 },
 369                 xns : Roo.bootstrap,
 370                 '|xns' : 'Roo.bootstrap',
 371                 after : {
 372                  xtype : 'Button',
 373                  html : _this._strings['cdb6b6bab1fd18b9dbfe3fb84a5d34ae'] /* <i class="fa fa-search"></i> */,
 374                  listeners : {
 375                   click : function (_self, e)
 376                    {
 377                        _this.masonry.clearAll();
 378                        _this.masonry.load();
 379                    }
 380                  },
 381                  xns : Roo.bootstrap,
 382                  '|xns' : 'Roo.bootstrap'
 383                 }
 384                }
 385               ]
 386              },
 387              {
 388               xtype : 'Column',
 389               cls : 'text-right',
 390               md : 4,
 391               sm : 12,
 392               xns : Roo.bootstrap,
 393               '|xns' : 'Roo.bootstrap',
 394               items  : [
 395                {
 396                 xtype : 'Button',
 397                 html : _this._strings['5350277f16d9998c57fa7e1d17be2a76'] /* <i class="fa fa-upload"></i> Upload Image */,
 398                 size : 'sm',
 399                 weight : 'primary',
 400                 listeners : {
 401                  click : function (_self, e)
 402                   {
 403                       var id = _this.data.onid;
 404
 405                       if(id*1 < 1){
 406                           Roo.MessageBox.alert('Error', 'Please save the email template first');
 407                           return;
 408                       }
 409
 410                       _this.uploadDL.inputEl().dom.click();
 411                   }
 412                 },
 413                 xns : Roo.bootstrap,
 414                 '|xns' : 'Roo.bootstrap'
 415                },
 416                {
 417                 xtype : 'Button',
 418                 html : _this._strings['ed807858fcb68abdd180481f1fcba5c5'] /* <i class="fa fa-trash"></i> Delete */,
 419                 size : 'sm',
 420                 style : 'margin-left: 15px;',
 421                 weight : 'default',
 422                 listeners : {
 423                  click : function (_self, e)
 424                   {
 425                       if (_this.masonry.getSelected().length > 1) {
 426                           Roo.bootstrap.MessageBox.alert('Cannot delete the images !','Please select one image only');
 427                           return;
 428                       }
 429
 430                       if (_this.masonry.getSelected().length < 1) {
 431                           Roo.bootstrap.MessageBox.alert('Cannot delete any image!', 'Please select an image');
 432                           return;
 433                       }
 434
 435                       Roo.bootstrap.MessageBox.confirm("Confirm", "Are sure you want to delete this image?", function (v){
 436                           if (v != 'yes') {
 437                               return;
 438                           }
 439
 440                           new Pman.Request({
 441                               url : baseURL + '/Roo/Images.php',
 442                               method: 'POST',
 443                               params : {
 444                                   _delete : Roo.bootstrap.MasonryBrick.get(_this.masonry.getSelected()[0]).imageObj.id
 445                               },
 446                               success : function()
 447                               {
 448                   //                _this.masonry.removeBrick(_this.masonry.getSelected()[0]);
 449                                   _this.masonry.load();
 450                               }
 451                           });
 452                       });
 453                   },
 454                  render : function (_self)
 455                   {
 456                       _this.deleteBtn = this;
 457
 458                       this.hide();
 459                   }
 460                 },
 461                 xns : Roo.bootstrap,
 462                 '|xns' : 'Roo.bootstrap'
 463                }
 464               ]
 465              }
 466             ]
 467            },
 468            {
 469             xtype : 'Row',
 470             style : 'margin-top: 15px;',
 471             listeners : {
 472              render : function (_self)
 473               {
 474                   _this.document_container = this;
 475
 476                   this.el.setStyle('overflow', 'auto');
 477               }
 478             },
 479             xns : Roo.bootstrap,
 480             '|xns' : 'Roo.bootstrap',
 481             items  : [
 482              {
 483               xtype : 'Column',
 484               md : 12,
 485               xns : Roo.bootstrap,
 486               '|xns' : 'Roo.bootstrap',
 487               items  : [
 488                {
 489                 xtype : 'LayoutMasonry',
 490                 activeClass : 'active',
 491                 boxWidth : 250,
 492                 isAutoInitial : false,
 493                 isLayoutInstant : false,
 494                 load : function()
 495                 {
 496                     _this.setting_form.reset();
 497                     _this.detail_form.reset();
 498
 499                     _this.setting_form.hide();
 500                     _this.detail_form.hide();
 501
 502                     _this.masonry.clearAll();
 503
 504                     var params = {
 505                         ontable : 'core_email',
 506                         'search[filename]' : _this.searchBox.getValue()
 507                     };
 508
 509                     if(_this.showType == 'private'){
 510                         params.onid = _this.data.onid;
 511                     }
 512
 513                     new Pman.Request({
 514                         url: baseURL + '/Roo/Images',
 515                         method: 'GET',
 516                         params: params,
 517                         success: function(ret) {
 518
 519                             if(!ret.data.length){
 520                                 return;
 521                             }
 522
 523                             Roo.each(ret.data, function(r){
 524
 525                                 _this.masonry.addBrick({
 526                                     size: 'md',
 527                                     boxWidth: 150,
 528                                     cls: 'coba-image-mgmt-masonry-brick',
 529                                     active: false,
 530                                     activeClass: 'active',
 531                                     preventDefault: true,
 532                                     bgimage : baseURL + '/Images/' + r.id + '/' + r.filename.replace('%', '-'),
 533                                     imageObj: r,
 534                                     listeners : {
 535                                         click : function (_self)
 536                                         {
 537                                             _this.setting_form.reset();
 538                                             _this.detail_form.reset();
 539
 540                                             _this.setting_form.hide();
 541                                             _this.detail_form.hide();
 542
 543                                             _this.deleteBtn.hide();
 544
 545                                             _this.masonryBlock.el.removeClass(['col-md-12','col-md-8']).addClass('col-md-12');
 546
 547                                             if(!this.isSelected()){
 548                                                 return;
 549                                             }
 550
 551                                             _this.masonryBlock.el.removeClass(['col-md-12','col-md-8']).addClass('col-md-8');
 552
 553                                             if(_this.masonry.getSelected().length == 1){
 554                                                 _this.deleteBtn.show();
 555                                             }
 556
 557                                             new Pman.Request({
 558                                                 url: baseURL + '/Roo/Images.php',
 559                                                 method : 'GET',
 560                                                 params : {
 561                                                     _id: _self.imageObj.id
 562                                                 },
 563                                                 success : function(rr) {
 564
 565                                                     _this.setting_form.show();
 566                                                     _this.detail_form.show();
 567
 568                                                     _this.detail_form.setValues(rr.data);
 569                                                     _this.setting_form.setValues(rr.data);
 570
 571                                                     _this.setting_form.findField('align').setValue("left");
 572
 573                                                     _self.imageObj = rr.data;
 574                                                 }
 575                                             });
 576
 577                                         }
 578                                      }
 579                                 })
 580
 581                             });
 582
 583                             _this.masonry.initial();
 584
 585                          },
 586
 587                          failure: function(res) {
 588                              Roo.log('cannot read Coba/Roo/Images');
 589                          }
 590                      });
 591                 },
 592                 listeners : {
 593                  render : function (_self)
 594                   {
 595                       _this.masonry = this;
 596
 597                   }
 598                 },
 599                 xns : Roo.bootstrap,
 600                 '|xns' : 'Roo.bootstrap'
 601                }
 602               ]
 603              }
 604             ]
 605            }
 606           ]
 607          }
 608         ]
 609        },
 610        {
 611         xtype : 'Column',
 612         md : 4,
 613         xns : Roo.bootstrap,
 614         '|xns' : 'Roo.bootstrap',
 615         items  : [
 616          {
 617           xtype : 'Row',
 618           xns : Roo.bootstrap,
 619           '|xns' : 'Roo.bootstrap',
 620           items  : [
 621            {
 622             xtype : 'Column',
 623             md : 12,
 624             xns : Roo.bootstrap,
 625             '|xns' : 'Roo.bootstrap',
 626             items  : [
 627              {
 628               xtype : 'Form',
 629               loadMask : true,
 630               url : baseURL + '/Roo/Images',
 631               listeners : {
 632                render : function (_self)
 633                 {
 634                     _this.setting_form = this;
 635                 }
 636               },
 637               xns : Roo.bootstrap,
 638               '|xns' : 'Roo.bootstrap',
 639               items  : [
 640                {
 641                 xtype : 'Container',
 642                 header : _this._strings['1a0ce561842e3caef9098f46ecaa1dcf'] /* Add Images with Settings */,
 643                 panel : 'default',
 644                 style : 'width: 100%;',
 645                 xns : Roo.bootstrap,
 646                 '|xns' : 'Roo.bootstrap',
 647                 items  : [
 648                  {
 649                   xtype : 'Row',
 650                   xns : Roo.bootstrap,
 651                   '|xns' : 'Roo.bootstrap',
 652                   items  : [
 653                    {
 654                     xtype : 'Column',
 655                     md : 12,
 656                     xns : Roo.bootstrap,
 657                     '|xns' : 'Roo.bootstrap',
 658                     items  : [
 659                      {
 660                       xtype : 'Input',
 661                       cls : 'row-style',
 662                       fieldLabel : _this._strings['031fa343a28d221a25d2bcd942437174'] /* Alternate Text: */,
 663                       labelWidth : 4,
 664                       name : 'descript',
 665                       xns : Roo.bootstrap,
 666                       '|xns' : 'Roo.bootstrap'
 667                      }
 668                     ]
 669                    }
 670                   ]
 671                  },
 672                  {
 673                   xtype : 'Row',
 674                   xns : Roo.bootstrap,
 675                   '|xns' : 'Roo.bootstrap',
 676                   items  : [
 677                    {
 678                     xtype : 'Column',
 679                     md : 12,
 680                     style : 'margin-top:15px;',
 681                     xns : Roo.bootstrap,
 682                     '|xns' : 'Roo.bootstrap',
 683                     items  : [
 684                      {
 685                       xtype : 'Input',
 686                       cls : 'row-style',
 687                       fieldLabel : _this._strings['e933dc24fb245d863a43b4fefe9b45f5'] /* Height: */,
 688                       labelWidth : 4,
 689                       name : 'height',
 690                       xns : Roo.bootstrap,
 691                       '|xns' : 'Roo.bootstrap'
 692                      }
 693                     ]
 694                    }
 695                   ]
 696                  },
 697                  {
 698                   xtype : 'Row',
 699                   xns : Roo.bootstrap,
 700                   '|xns' : 'Roo.bootstrap',
 701                   items  : [
 702                    {
 703                     xtype : 'Column',
 704                     md : 12,
 705                     style : 'margin-top:15px;',
 706                     xns : Roo.bootstrap,
 707                     '|xns' : 'Roo.bootstrap',
 708                     items  : [
 709                      {
 710                       xtype : 'Input',
 711                       cls : 'row-style',
 712                       fieldLabel : _this._strings['48ccf48dcf2218a413ce473262f21a0c'] /* Width:  */,
 713                       labelWidth : 4,
 714                       name : 'width',
 715                       xns : Roo.bootstrap,
 716                       '|xns' : 'Roo.bootstrap'
 717                      }
 718                     ]
 719                    }
 720                   ]
 721                  },
 722                  {
 723                   xtype : 'Row',
 724                   xns : Roo.bootstrap,
 725                   '|xns' : 'Roo.bootstrap',
 726                   items  : [
 727                    {
 728                     xtype : 'Column',
 729                     md : 12,
 730                     style : 'margin-top:15px;',
 731                     xns : Roo.bootstrap,
 732                     '|xns' : 'Roo.bootstrap',
 733                     items  : [
 734                      {
 735                       xtype : 'ComboBox',
 736                       allowBlank : true,
 737                       alwaysQuery : true,
 738                       cls : 'row-style',
 739                       displayField : 'value',
 740                       editable : false,
 741                       fieldLabel : _this._strings['361bacb1a72a350ee34e2f31a6a91dab'] /* Alignment: */,
 742                       forceSelection : true,
 743                       labelWidth : 4,
 744                       mode : 'local',
 745                       name : 'align',
 746                       selectOnFocus : true,
 747                       triggerAction : 'all',
 748                       valueField : 'code',
 749                       xns : Roo.bootstrap,
 750                       '|xns' : 'Roo.bootstrap',
 751                       store : {
 752                        xtype : 'SimpleStore',
 753                        data : [
 754                            ['left', 'left'],
 755                            ['right', 'right'],
 756                            ['middle', 'middle'],
 757                            ['top', 'top'],
 758                            ['bottom', 'bottom']
 759                        ],
 760                        fields : ['code', 'value'],
 761                        xns : Roo.data,
 762                        '|xns' : 'Roo.data'
 763                       }
 764                      }
 765                     ]
 766                    }
 767                   ]
 768                  },
 769                  {
 770                   xtype : 'Row',
 771                   xns : Roo.bootstrap,
 772                   '|xns' : 'Roo.bootstrap',
 773                   items  : [
 774                    {
 775                     xtype : 'Column',
 776                     cls : 'text-center',
 777                     md : 12,
 778                     style : 'margin-top:15px;',
 779                     xns : Roo.bootstrap,
 780                     '|xns' : 'Roo.bootstrap',
 781                     items  : [
 782                      {
 783                       xtype : 'Button',
 784                       html : _this._strings['84378f54966381befd040dafbdc221d6'] /* <i class="fa fa-plus"></i> Add into the email */,
 785                       name : 'add',
 786                       weight : 'default',
 787                       listeners : {
 788                        click : function (_self, e)
 789                         {
 790                             var b = _this.masonry.getSelected();
 791
 792                             if (b.length < 1) {
 793
 794                                 Roo.bootstrap.MessageBox.alert('Cannot add any image', 'Please select an image');
 795                                 return;
 796                             }
 797
 798                             var brick = Roo.bootstrap.MasonryBrick.get(b[0]);
 799
 800                             _this.dialog.hide();
 801
 802                             if(_this.callback){
 803
 804                                 var data = {
 805                                     id : brick.imageObj.id,
 806                                     filename : brick.imageObj.filename,
 807                                     width : _this.setting_form.findField('width').getValue(),
 808                                     height : _this.setting_form.findField('height').getValue(),
 809                                     descript : _this.setting_form.findField('descript').getValue(),
 810                                     align : _this.setting_form.findField('align').getValue()
 811                                 };
 812
 813                                 _this.callback.call(_this, data);
 814
 815                             }
 816                         }
 817                       },
 818                       xns : Roo.bootstrap,
 819                       '|xns' : 'Roo.bootstrap'
 820                      }
 821                     ]
 822                    }
 823                   ]
 824                  }
 825                 ]
 826                }
 827               ]
 828              }
 829             ]
 830            }
 831           ]
 832          },
 833          {
 834           xtype : 'Row',
 835           xns : Roo.bootstrap,
 836           '|xns' : 'Roo.bootstrap',
 837           items  : [
 838            {
 839             xtype : 'Column',
 840             md : 12,
 841             xns : Roo.bootstrap,
 842             '|xns' : 'Roo.bootstrap',
 843             items  : [
 844              {
 845               xtype : 'Form',
 846               loadMask : true,
 847               url : baseURL + '/Roo/Images',
 848               listeners : {
 849                render : function (_self)
 850                 {
 851                     _this.detail_form = this;
 852                 }
 853               },
 854               xns : Roo.bootstrap,
 855               '|xns' : 'Roo.bootstrap',
 856               items  : [
 857                {
 858                 xtype : 'Container',
 859                 header : _this._strings['78d0f5aac952e2ce840a381976a3b01e'] /* Image Details */,
 860                 panel : 'default',
 861                 style : 'width: 100%; padding: 0',
 862                 xns : Roo.bootstrap,
 863                 '|xns' : 'Roo.bootstrap',
 864                 items  : [
 865                  {
 866                   xtype : 'Row',
 867                   xns : Roo.bootstrap,
 868                   '|xns' : 'Roo.bootstrap',
 869                   items  : [
 870                    {
 871                     xtype : 'Column',
 872                     md : 12,
 873                     xns : Roo.bootstrap,
 874                     '|xns' : 'Roo.bootstrap',
 875                     items  : [
 876                      {
 877                       xtype : 'Input',
 878                       cls : 'row-style',
 879                       disabled : true,
 880                       fieldLabel : _this._strings['708ea0e601087e73c4764d5086e3ea3c'] /* File Name: */,
 881                       labelWidth : 4,
 882                       name : 'filename',
 883                       style : 'padding: 0;',
 884                       xns : Roo.bootstrap,
 885                       '|xns' : 'Roo.bootstrap'
 886                      }
 887                     ]
 888                    }
 889                   ]
 890                  },
 891                  {
 892                   xtype : 'Row',
 893                   xns : Roo.bootstrap,
 894                   '|xns' : 'Roo.bootstrap',
 895                   items  : [
 896                    {
 897                     xtype : 'Column',
 898                     md : 12,
 899                     style : 'margin-top:15px;',
 900                     xns : Roo.bootstrap,
 901                     '|xns' : 'Roo.bootstrap',
 902                     items  : [
 903                      {
 904                       xtype : 'Input',
 905                       cls : 'row-style',
 906                       disabled : true,
 907                       fieldLabel : _this._strings['e0a53da57dd79cca5d3b6a7c42e463ef'] /* File Type: */,
 908                       labelWidth : 4,
 909                       name : 'mimetype',
 910                       xns : Roo.bootstrap,
 911                       '|xns' : 'Roo.bootstrap'
 912                      }
 913                     ]
 914                    }
 915                   ]
 916                  },
 917                  {
 918                   xtype : 'Row',
 919                   xns : Roo.bootstrap,
 920                   '|xns' : 'Roo.bootstrap',
 921                   items  : [
 922                    {
 923                     xtype : 'Column',
 924                     md : 12,
 925                     style : 'margin-top:15px;',
 926                     xns : Roo.bootstrap,
 927                     '|xns' : 'Roo.bootstrap',
 928                     items  : [
 929                      {
 930                       xtype : 'Input',
 931                       cls : 'row-style',
 932                       disabled : true,
 933                       fieldLabel : _this._strings['3f986fa4066f6bded1376eb69de18da2'] /* File Size: */,
 934                       labelWidth : 4,
 935                       name : 'filesize',
 936                       xns : Roo.bootstrap,
 937                       '|xns' : 'Roo.bootstrap'
 938                      }
 939                     ]
 940                    }
 941                   ]
 942                  },
 943                  {
 944                   xtype : 'Row',
 945                   xns : Roo.bootstrap,
 946                   '|xns' : 'Roo.bootstrap',
 947                   items  : [
 948                    {
 949                     xtype : 'Column',
 950                     md : 12,
 951                     style : 'margin-top:15px;',
 952                     xns : Roo.bootstrap,
 953                     '|xns' : 'Roo.bootstrap',
 954                     items  : [
 955                      {
 956                       xtype : 'Input',
 957                       cls : 'row-style',
 958                       disabled : true,
 959                       fieldLabel : _this._strings['14834a16229091f47cf1810177d07916'] /* Created Date: */,
 960                       labelWidth : 4,
 961                       name : 'created',
 962                       xns : Roo.bootstrap,
 963                       '|xns' : 'Roo.bootstrap'
 964                      }
 965                     ]
 966                    }
 967                   ]
 968                  },
 969                  {
 970                   xtype : 'Row',
 971                   xns : Roo.bootstrap,
 972                   '|xns' : 'Roo.bootstrap',
 973                   items  : [
 974                    {
 975                     xtype : 'Column',
 976                     md : 12,
 977                     style : 'margin-top:15px;',
 978                     xns : Roo.bootstrap,
 979                     '|xns' : 'Roo.bootstrap',
 980                     items  : [
 981                      {
 982                       xtype : 'Input',
 983                       cls : 'row-style',
 984                       fieldLabel : _this._strings['d0042a700e9bdf79689d63ee6846dc0e'] /* Description: */,
 985                       labelWidth : 4,
 986                       name : 'descript',
 987                       xns : Roo.bootstrap,
 988                       '|xns' : 'Roo.bootstrap'
 989                      }
 990                     ]
 991                    }
 992                   ]
 993                  },
 994                  {
 995                   xtype : 'Input',
 996                   inputType : 'hidden',
 997                   name : 'id',
 998                   xns : Roo.bootstrap,
 999                   '|xns' : 'Roo.bootstrap'
1000                  },
1001                  {
1002                   xtype : 'Row',
1003                   xns : Roo.bootstrap,
1004                   '|xns' : 'Roo.bootstrap',
1005                   items  : [
1006                    {
1007                     xtype : 'Column',
1008                     cls : 'text-center',
1009                     md : 12,
1010                     style : 'margin-top:15px;',
1011                     xns : Roo.bootstrap,
1012                     '|xns' : 'Roo.bootstrap',
1013                     items  : [
1014                      {
1015                       xtype : 'Button',
1016                       html : _this._strings['d6d93f0d6b7c6018d8949e73ed6efb6c'] /* <i class="fa fa-save"></i> Save Changes */,
1017                       weight : 'default',
1018                       listeners : {
1019                        click : function (_self, e)
1020                         {
1021                             _this.detail_form.doAction('submit');
1022                         }
1023                       },
1024                       xns : Roo.bootstrap,
1025                       '|xns' : 'Roo.bootstrap'
1026                      }
1027                     ]
1028                    }
1029                   ]
1030                  }
1031                 ]
1032                }
1033               ]
1034              }
1035             ]
1036            }
1037           ]
1038          }
1039         ]
1040        }
1041       ]
1042      }
1043     ]
1044    }  );
1045  }
1046 });
1047 Roo.apply(Pman.Dialog.BAdminImageManager, Pman.Dialog.BAdminImageManager.prototype);