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