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

   1 {
   2  "name" : "Pman.Dialog.BAdminImageManager",
   3  "parent" : "",
   4  "title" : "Pman.Dialog.BAdminImageManager",
   5  "path" : "/home/edward/gitlive/Pman.BAdmin/Pman.Dialog.BAdminImageManager.bjs",
   6  "permname" : "",
   7  "modOrder" : "001",
   8  "strings" : {
   9   "ef797d5638c2e1c6b6225b2247541ea5" : "Upload Image or File:",
  10   "d9787032e54a7facd5c7b1db2ae61c7b" : "Image Manager",
  11   "37c1097cf82226d511586ecd99ed97cf" : "search for image",
  12   "cdb6b6bab1fd18b9dbfe3fb84a5d34ae" : "<i class=\"fa fa-search\"></i>",
  13   "5350277f16d9998c57fa7e1d17be2a76" : "<i class=\"fa fa-upload\"></i> Upload Image",
  14   "14834a16229091f47cf1810177d07916" : "Created Date:",
  15   "ec211f7c20af43e742bf2570c3cb84f9" : "Add",
  16   "1a0ce561842e3caef9098f46ecaa1dcf" : "Add Images with Settings",
  17   "7dce122004969d56ae2e0245cb754d35" : "Edit",
  18   "78d0f5aac952e2ce840a381976a3b01e" : "Image Details",
  19   "708ea0e601087e73c4764d5086e3ea3c" : "File Name:",
  20   "e0a53da57dd79cca5d3b6a7c42e463ef" : "File Type:",
  21   "3f986fa4066f6bded1376eb69de18da2" : "File Size:",
  22   "d3d2e617335f08df83599665eef8a418" : "Close",
  23   "84378f54966381befd040dafbdc221d6" : "<i class=\"fa fa-plus\"></i> Add into the email",
  24   "361bacb1a72a350ee34e2f31a6a91dab" : "Alignment:",
  25   "4d1c8263ba1036754f8db14a98f9f006" : "Reload",
  26   "f48f7c7bccb5e29c83d87984c49ad8d4" : "Show image for this email",
  27   "ed807858fcb68abdd180481f1fcba5c5" : "<i class=\"fa fa-trash\"></i> Delete",
  28   "031fa343a28d221a25d2bcd942437174" : "Alternate Text:",
  29   "48ccf48dcf2218a413ce473262f21a0c" : "Width: ",
  30   "d0042a700e9bdf79689d63ee6846dc0e" : "Description:",
  31   "15685a688679bfdd0f6d064f6d5375a4" : "<i class=\"fas fa-filter\"></i>",
  32   "f2a6c498fb90ee345d997f888fce3b18" : "Delete",
  33   "d6d93f0d6b7c6018d8949e73ed6efb6c" : "<i class=\"fa fa-save\"></i> Save Changes",
  34   "e933dc24fb245d863a43b4fefe9b45f5" : "Height:"
  35  },
  36  "named_strings" : {
  37   "align_fieldLabel" : "361bacb1a72a350ee34e2f31a6a91dab",
  38   "filename_fieldLabel" : "708ea0e601087e73c4764d5086e3ea3c",
  39   "add_html" : "84378f54966381befd040dafbdc221d6",
  40   "created_fieldLabel" : "14834a16229091f47cf1810177d07916",
  41   "height_fieldLabel" : "e933dc24fb245d863a43b4fefe9b45f5",
  42   "mimetype_fieldLabel" : "e0a53da57dd79cca5d3b6a7c42e463ef",
  43   "close_html" : "d3d2e617335f08df83599665eef8a418",
  44   "imageUpload_fieldLabel" : "ef797d5638c2e1c6b6225b2247541ea5",
  45   "width_fieldLabel" : "48ccf48dcf2218a413ce473262f21a0c",
  46   "filesize_fieldLabel" : "3f986fa4066f6bded1376eb69de18da2",
  47   "descript_fieldLabel" : "d0042a700e9bdf79689d63ee6846dc0e"
  48  },
  49  "items" : [
  50   {
  51    "listeners" : {
  52     "resize" : "function (_self)\n{\n    if (_this.dialog && _this.container && _this.toolbar) {\n        \n        _this.document_container.el.setHeight(\n            _this.dialog.bodyEl.getHeight() -\n            _this.dialog.headerEl.getHeight() -\n            _this.toolbar.el.dom.offsetHeight -\n            _this.dialog.footerEl.getHeight()\n        );\n        \n    }\n}"
  53    },
  54    "String cls" : "modal-body-enable-overflow-y pman-badmin-image-manager",
  55    "Boolean fitwindow" : true,
  56    "xtype" : "Modal",
  57    "$ xns" : "Roo.bootstrap",
  58    "String title" : "Image Manager",
  59    "items" : [
  60     {
  61      "listeners" : {
  62       "click" : "function (_self, e)\n{\n    _this.dialog.hide();\n}"
  63      },
  64      "xtype" : "Button",
  65      "$ xns" : "Roo.bootstrap",
  66      "String html" : "Close",
  67      "string weight" : "default",
  68      "* prop" : "buttons[]",
  69      "string name" : "close"
  70     },
  71     {
  72      "xtype" : "Row",
  73      "$ xns" : "Roo.bootstrap",
  74      "items" : [
  75       {
  76        "xtype" : "Column",
  77        "$ xns" : "Roo.bootstrap",
  78        "Number sm" : 8,
  79        "items" : [
  80         {
  81          "listeners" : {
  82           "actionfailed" : "function (_self, action)\n{\n    if (action.type == 'submit') {\n        Roo.log(\"Upload error\");\n        Roo.log(action);\n        \n        try {\n            \n            Roo.MessageBox.alert(\"Error\", action.result.errorMsg.split(/\\n/).join('<BR/>'));\n            \n        } catch(e) {\n            \n            Roo.MessageBox.alert(\"Error\", \"Saving failed = fix errors and try again\");\n        }\n        return;\n    }\n    \n    Roo.MessageBox.alert(\"Error\", \"Error loading details\"); \n}",
  83           "actioncomplete" : "function(_self,action)\n{\n    if (action.type == 'setdata') { \n        \n        this.url = _this.data._url ? baseURL + _this.data._url : baseURL + '/Roo/Images.php';\n        \n        this.el.dom.action = this.url;\n        \n        if (typeof(_this.data.timeout) != 'undefined') {\n            this.timeout = _this.data.timeout;\n        }\n        \n        this.findField('UPLOAD_IDENTIFIER').setValue(\n            (new Date() * 1) + '' + Math.random());\n        \n        _this.masonry.load();\n        \n        return;\n    }\n     \n   \n    if (action.type == 'load') {\n        \n        _this.data = action.result.data;\n        \n        return;\n    }\n    \n    \n    if (action.type == 'submit') { // only submitted here if we are \n        \n        _this.masonry.load();\n        \n        return; \n    }\n \n\n    \n}\n",
  84           "render" : "function (_self)\n{\n    _this.form = this;\n    \n}"
  85          },
  86          "style" : "display: none;",
  87          "xtype" : "Form",
  88          "Number timeout" : 300,
  89          "$ xns" : "Roo.bootstrap",
  90          "Boolean fileUpload" : true,
  91          "String method" : "POST",
  92          "$ String url" : "baseURL + '/Roo/Images.php'",
  93          "items" : [
  94           {
  95            "listeners" : {
  96             "render" : "function (_self)\n{\n    _this.uploadDL = this;\n    \n    _this.uploadDL.inputEl().on(\"change\",function(){\n        \n        _this.form.findField('onid').setValue(_this.showTypeBtn.isActive() ? _this.data.onid : 0);\n        _this.form.doAction('submit');\n        \n        //_this.dialog.uploadProgress.defer(1000, _this.dialog);\n    });\n    \n    \n}"
  97            },
  98            "String name" : "imageUpload",
  99            "xtype" : "Input",
 100            "string fieldLabel" : "Upload Image or File:",
 101            "String inputType" : "file",
 102            "$ xns" : "Roo.bootstrap",
 103            "Number labelWidth" : 4
 104           },
 105           {
 106            "String name" : "UPLOAD_IDENTIFIER",
 107            "xtype" : "Input",
 108            "String inputType" : "hidden",
 109            "$ xns" : "Roo.bootstrap"
 110           },
 111           {
 112            "String name" : "post_max_size",
 113            "xtype" : "Input",
 114            "String inputType" : "hidden",
 115            "$ xns" : "Roo.bootstrap"
 116           },
 117           {
 118            "String name" : "upload_max_filesize",
 119            "xtype" : "Input",
 120            "String inputType" : "hidden",
 121            "$ xns" : "Roo.bootstrap"
 122           },
 123           {
 124            "String name" : "ontable",
 125            "xtype" : "Input",
 126            "String inputType" : "hidden",
 127            "$ xns" : "Roo.bootstrap"
 128           },
 129           {
 130            "String name" : "onid",
 131            "xtype" : "Input",
 132            "String inputType" : "hidden",
 133            "$ xns" : "Roo.bootstrap"
 134           },
 135           {
 136            "String name" : "id",
 137            "xtype" : "Input",
 138            "String inputType" : "hidden",
 139            "$ xns" : "Roo.bootstrap"
 140           }
 141          ]
 142         },
 143         {
 144          "listeners" : {
 145           "render" : "function (_self)\n{\n    _this.container = this;\n    \n}"
 146          },
 147          "xtype" : "Container",
 148          "$ xns" : "Roo.bootstrap",
 149          "items" : [
 150           {
 151            "listeners" : {
 152             "render" : "function (_self)\n{\n    _this.toolbar = this;\n}"
 153            },
 154            "xtype" : "Row",
 155            "$ xns" : "Roo.bootstrap",
 156            "items" : [
 157             {
 158              "Number md" : 8,
 159              "xtype" : "Column",
 160              "$ xns" : "Roo.bootstrap",
 161              "items" : [
 162               {
 163                "xtype" : "Button",
 164                "$ xns" : "Roo.bootstrap",
 165                "String html" : "<i class=\"fas fa-filter\"></i>",
 166                "String style" : "float:left;",
 167                "items" : [
 168                 {
 169                  "xtype" : "Menu",
 170                  "$ xns" : "Roo.bootstrap",
 171                  "* prop" : "menu",
 172                  "items" : [
 173                   {
 174                    "listeners" : {
 175                     "click" : "function (_self, e)\n{\n    Pman.Dialog.BAdminGroups.show({ id : 0 }, function(res){\n        _this.group_grid.store.load({});\n    });\n}"
 176                    },
 177                    "Boolean preventDefault" : true,
 178                    "xtype" : "MenuItem",
 179                    "String fa" : "fa fa-plus",
 180                    "$ xns" : "Roo.bootstrap",
 181                    "Boolean isContainer" : false,
 182                    "String html" : "Add"
 183                   },
 184                   {
 185                    "listeners" : {
 186                     "click" : "function (_self, e)\n{\n    var sel = _this.group_grid.getSelectionModel().getSelected();\n    \n    if(!sel){\n        Roo.bootstrap.MessageBox.alert('Error', 'Please select a group');\n        return;\n    }\n    \n    if(sel.data.id * 1 < 1){\n        Roo.bootstrap.MessageBox.alert('Error', 'The selected group is not editable');\n        return;\n    }\n    \n    Pman.Dialog.BAdminGroups.show({ id : sel.data.id }, function(res){\n        _this.group_grid.store.load({});\n    });\n}"
 187                    },
 188                    "Boolean preventDefault" : true,
 189                    "xtype" : "MenuItem",
 190                    "String fa" : "fa fa-pencil",
 191                    "$ xns" : "Roo.bootstrap",
 192                    "Boolean isContainer" : false,
 193                    "String html" : "Edit"
 194                   },
 195                   {
 196                    "listeners" : {
 197                     "click" : "function (_self, e)\n{\n    var sel = _this.group_grid.getSelectionModel().getSelected();\n    \n    if(!sel){\n        Roo.bootstrap.MessageBox.alert('Error', 'Please select a group');\n        return;\n    }\n    \n    if(sel.data.id * 1 < 1){\n        Roo.bootstrap.MessageBox.alert('Error', 'The selected group is not editable');\n        return;\n    }\n    \n    var deleteIt = function()\n    {\n        new Pman.Request({\n            url: baseURL + '/Roo/Core_group',\n            method: 'POST',\n            params: {\n                _delete : sel.data.id\n            },\n            success: function(res){\n                _this.group_grid.store.load({});\n                return;\n            }\n        });\n    }\n    \n    Roo.bootstrap.MessageBox.confirm('Confirm', 'Are you sure to delete the group?',function(ret) {\n        \n        if(ret == 'no'){\n            return;\n        }\n        \n        deleteIt();\n        \n     }, this);\n    \n    \n}"
 198                    },
 199                    "Boolean preventDefault" : true,
 200                    "xtype" : "MenuItem",
 201                    "String fa" : "fa fa-trash",
 202                    "$ xns" : "Roo.bootstrap",
 203                    "Boolean isContainer" : false,
 204                    "String html" : "Delete"
 205                   },
 206                   {
 207                    "listeners" : {
 208                     "click" : "function (_self, e)\n{\n    _this.group_grid.store.load({});\n}"
 209                    },
 210                    "Boolean preventDefault" : true,
 211                    "xtype" : "MenuItem",
 212                    "String fa" : "fa fa-refresh",
 213                    "$ xns" : "Roo.bootstrap",
 214                    "Boolean isContainer" : false,
 215                    "String html" : "Reload"
 216                   }
 217                  ]
 218                 }
 219                ]
 220               },
 221               {
 222                "listeners" : {
 223                 "toggle" : "function (b, e, pressed)\n{\n    _this.showTypeBtn.setText(!pressed ? 'Show all images' : 'Show image for this email');\n    \n    _this.masonry.load();\n}",
 224                 "render" : "function (_self)\n{\n    _this.showTypeBtn = this;\n}"
 225                },
 226                "bool pressed" : false,
 227                "xtype" : "Button",
 228                "$ xns" : "Roo.bootstrap",
 229                "String html" : "Show image for this email",
 230                "String style" : "float:left;"
 231               },
 232               {
 233                "listeners" : {
 234                 "specialkey" : "function (_self, e)\n{    \n    \n    var image_name = \"\";\n    \n    if(e.keyCode == e.ENTER) {\n        _this.masonry.clearAll();\n        _this.masonry.load();\n    \n    }\n}",
 235                 "render" : "function (_self)\n{\n    _this.searchBox = this;\n}"
 236                },
 237                "xtype" : "Input",
 238                "string placeholder" : "search for image",
 239                "$ xns" : "Roo.bootstrap",
 240                "String style" : "float:left; width: 300px; margin-left: 15px;",
 241                "items" : [
 242                 {
 243                  "listeners" : {
 244                   "click" : "function (_self, e)\n{\n    _this.masonry.clearAll();\n    _this.masonry.load();\n}"
 245                  },
 246                  "xtype" : "Button",
 247                  "$ xns" : "Roo.bootstrap",
 248                  "String html" : "<i class=\"fa fa-search\"></i>",
 249                  "* prop" : "after"
 250                 }
 251                ]
 252               }
 253              ]
 254             },
 255             {
 256              "Number md" : 4,
 257              "String cls" : "text-right",
 258              "xtype" : "Column",
 259              "$ xns" : "Roo.bootstrap",
 260              "items" : [
 261               {
 262                "listeners" : {
 263                 "click" : "function (_self, e)\n{\n    var id = _this.data.onid;\n    \n    if(id*1 < 1){\n        Roo.MessageBox.alert('Error', 'Please save the email template first');\n        return;\n    }\n    \n    _this.uploadDL.inputEl().dom.click();\n}"
 264                },
 265                "xtype" : "Button",
 266                "$ xns" : "Roo.bootstrap",
 267                "String html" : "<i class=\"fa fa-upload\"></i> Upload Image",
 268                "string weight" : "primary"
 269               },
 270               {
 271                "listeners" : {
 272                 "render" : "function (_self)\n{\n    _this.deleteBtn = this;\n    \n    this.hide();\n}",
 273                 "click" : "function (_self, e)\n{\n    if (_this.masonry.getSelected().length > 1) {\n        Roo.bootstrap.MessageBox.alert('Cannot delete the images !','Please select one image only');\n        return;\n    }\n    \n    if (_this.masonry.getSelected().length < 1) {\n        Roo.bootstrap.MessageBox.alert('Cannot delete any image!', 'Please select an image');\n        return;\n    }\n    \n    Roo.bootstrap.MessageBox.confirm(\"Confirm\", \"Are sure you want to delete this image?\", function (v){\n        if (v != 'yes') {\n            return;\n        }\n        \n        new Pman.Request({\n            url : baseURL + '/Roo/Images.php',\n            method: 'POST',\n            params : {\n                _delete : Roo.bootstrap.MasonryBrick.get(_this.masonry.getSelected()[0]).imageObj.id\n            },\n            success : function()\n            {\n//                _this.masonry.removeBrick(_this.masonry.getSelected()[0]);\n                _this.masonry.load();\n            }\n        });\n    });\n}"
 274                },
 275                "String weight" : "default",
 276                "xtype" : "Button",
 277                "$ xns" : "Roo.bootstrap",
 278                "String html" : "<i class=\"fa fa-trash\"></i> Delete",
 279                "String style" : "margin-left: 15px;"
 280               }
 281              ]
 282             }
 283            ]
 284           },
 285           {
 286            "listeners" : {
 287             "render" : "function (_self)\n{\n    _this.document_container = this;\n    \n    this.el.setStyle('overflow', 'auto');\n}"
 288            },
 289            "xtype" : "Row",
 290            "$ xns" : "Roo.bootstrap",
 291            "String style" : "margin-top: 15px;",
 292            "items" : [
 293             {
 294              "Number md" : 12,
 295              "xtype" : "Column",
 296              "$ xns" : "Roo.bootstrap",
 297              "items" : [
 298               {
 299                "listeners" : {
 300                 "render" : "function (_self)\n{\n    _this.masonry = this;\n    \n}"
 301                },
 302                "Boolean isLayoutInstant" : false,
 303                "| function load" : "function() \n{\n    _this.setting_form.reset();\n    _this.detail_form.reset();\n    \n    _this.setting_form.hide();\n    _this.detail_form.hide();\n    \n    _this.masonry.clearAll();\n    \n    new Pman.Request({\n        url: baseURL + '/Roo/Images',\n        method: 'GET',\n        params: {\n            ontable : 'core_email',\n            onid : _this.showTypeBtn.isActive() ? _this.data.onid : 0,\n            'search[filename]' : _this.searchBox.getValue()\n        },\n        success: function(ret) {\n            \n            if(!ret.data.length){\n                return;\n            }\n            \n            Roo.each(ret.data, function(r){\n                \n                _this.masonry.addBrick({\n                    size: 'md',\n                    boxWidth: 150,\n                    cls: 'coba-image-mgmt-masonry-brick',\n                    active: false,\n                    activeClass: 'active',\n                    preventDefault: true,\n                    bgimage : baseURL + '/Images/' + r.id + '/' + r.filename.replace('%', '-'),\n                    imageObj: r,\n                    listeners : {\n                        click : function (_self)\n                        {\n                            _this.setting_form.reset();\n                            _this.detail_form.reset();\n                            \n                            _this.setting_form.hide();\n                            _this.detail_form.hide();\n                            \n                            _this.deleteBtn.hide();\n                            \n                            if(!this.isSelected()){\n                                return;\n                            }\n                            \n                            if(_this.masonry.getSelected().length == 1){\n                                _this.deleteBtn.show();\n                            }\n                            \n                            new Pman.Request({\n                                url: baseURL + '/Roo/Images.php',\n                                method : 'GET',\n                                params : {\n                                    _id: _self.imageObj.id\n                                }, \n                                success : function(rr) {\n                                    \n                                    _this.setting_form.show();\n                                    _this.detail_form.show();\n                                    \n                                    _this.detail_form.setValues(rr.data);\n                                    _this.setting_form.setValues(rr.data);\n                                    \n                                    _this.setting_form.findField('align').setValue(\"left\");\n                                    \n                                    _self.imageObj = rr.data;\n                                }\n                            });\n                            \n                        }\n                     }\n                })\n                \n            });\n            \n            _this.masonry.initial();\n            \n         },\n         \n         failure: function(res) {\n             Roo.log('cannot read Coba/Roo/Images');\n         }\n     });\n}",
 304                "Number boxWidth" : 250,
 305                "xtype" : "LayoutMasonry",
 306                "$ xns" : "Roo.bootstrap",
 307                "string activeClass" : "active",
 308                "Boolean isAutoInitial" : false
 309               }
 310              ]
 311             }
 312            ]
 313           }
 314          ]
 315         }
 316        ]
 317       },
 318       {
 319        "xtype" : "Column",
 320        "$ xns" : "Roo.bootstrap",
 321        "Number sm" : 4,
 322        "items" : [
 323         {
 324          "xtype" : "Row",
 325          "$ xns" : "Roo.bootstrap",
 326          "items" : [
 327           {
 328            "Number md" : 12,
 329            "xtype" : "Column",
 330            "$ xns" : "Roo.bootstrap",
 331            "items" : [
 332             {
 333              "listeners" : {
 334               "render" : "function (_self)\n{\n    _this.setting_form = this;\n}"
 335              },
 336              "$ string url" : "baseURL + '/Roo/Images'\n",
 337              "xtype" : "Form",
 338              "$ xns" : "Roo.bootstrap",
 339              "Boolean loadMask" : true,
 340              "items" : [
 341               {
 342                "String header" : "Add Images with Settings",
 343                "$ String panel" : "'default'",
 344                "xtype" : "Container",
 345                "$ xns" : "Roo.bootstrap",
 346                "String style" : "width: 100%;",
 347                "items" : [
 348                 {
 349                  "xtype" : "Row",
 350                  "$ xns" : "Roo.bootstrap",
 351                  "items" : [
 352                   {
 353                    "Number md" : 12,
 354                    "xtype" : "Column",
 355                    "$ xns" : "Roo.bootstrap",
 356                    "items" : [
 357                     {
 358                      "String name" : "descript",
 359                      "xtype" : "Input",
 360                      "string fieldLabel" : "Alternate Text:",
 361                      "cls" : "row-style",
 362                      "$ xns" : "Roo.bootstrap",
 363                      "Number labelWidth" : 4
 364                     }
 365                    ]
 366                   }
 367                  ]
 368                 },
 369                 {
 370                  "xtype" : "Row",
 371                  "$ xns" : "Roo.bootstrap",
 372                  "items" : [
 373                   {
 374                    "Number md" : 12,
 375                    "xtype" : "Column",
 376                    "$ xns" : "Roo.bootstrap",
 377                    "String style" : "margin-top:15px;",
 378                    "items" : [
 379                     {
 380                      "String name" : "height",
 381                      "xtype" : "Input",
 382                      "string fieldLabel" : "Height:",
 383                      "cls" : "row-style",
 384                      "$ xns" : "Roo.bootstrap",
 385                      "Number labelWidth" : 4
 386                     }
 387                    ]
 388                   }
 389                  ]
 390                 },
 391                 {
 392                  "xtype" : "Row",
 393                  "$ xns" : "Roo.bootstrap",
 394                  "items" : [
 395                   {
 396                    "Number md" : 12,
 397                    "xtype" : "Column",
 398                    "$ xns" : "Roo.bootstrap",
 399                    "String style" : "margin-top:15px;",
 400                    "items" : [
 401                     {
 402                      "String name" : "width",
 403                      "xtype" : "Input",
 404                      "string fieldLabel" : "Width: ",
 405                      "cls" : "row-style",
 406                      "$ xns" : "Roo.bootstrap",
 407                      "Number labelWidth" : 4
 408                     }
 409                    ]
 410                   }
 411                  ]
 412                 },
 413                 {
 414                  "xtype" : "Row",
 415                  "$ xns" : "Roo.bootstrap",
 416                  "items" : [
 417                   {
 418                    "Number md" : 12,
 419                    "xtype" : "Column",
 420                    "$ xns" : "Roo.bootstrap",
 421                    "String style" : "margin-top:15px;",
 422                    "items" : [
 423                     {
 424                      "Boolean allowBlank" : true,
 425                      "Boolean selectOnFocus" : true,
 426                      "String name" : "align",
 427                      "String mode" : "local",
 428                      "String valueField" : "code",
 429                      "xtype" : "ComboBox",
 430                      "Boolean editable" : false,
 431                      "String triggerAction" : "all",
 432                      "string fieldLabel" : "Alignment:",
 433                      "Boolean alwaysQuery" : true,
 434                      "cls" : "row-style",
 435                      "$ xns" : "Roo.bootstrap",
 436                      "Number labelWidth" : 4,
 437                      "String displayField" : "value",
 438                      "Boolean forceSelection" : true,
 439                      "items" : [
 440                       {
 441                        "$ Array fields" : "['code', 'value']",
 442                        "xtype" : "SimpleStore",
 443                        "$ xns" : "Roo.data",
 444                        "* prop" : "store",
 445                        "| Array data" : "[\n    ['left', 'left'],\n    ['right', 'right'],\n    ['middle', 'middle'],\n    ['top', 'top'],\n    ['bottom', 'bottom']\n]"
 446                       }
 447                      ]
 448                     }
 449                    ]
 450                   }
 451                  ]
 452                 },
 453                 {
 454                  "xtype" : "Row",
 455                  "$ xns" : "Roo.bootstrap",
 456                  "items" : [
 457                   {
 458                    "Number md" : 12,
 459                    "String cls" : "text-center",
 460                    "xtype" : "Column",
 461                    "$ xns" : "Roo.bootstrap",
 462                    "String style" : "margin-top:15px;",
 463                    "items" : [
 464                     {
 465                      "listeners" : {
 466                       "click" : "function (_self, e)\n{\n    var b = _this.masonry.getSelected();\n    \n    if (b.length < 1) {\n        \n        Roo.bootstrap.MessageBox.alert('Cannot add any image', 'Please select an image');\n        return;\n    }\n    \n    var brick = Roo.bootstrap.MasonryBrick.get(b[0]);\n    \n    _this.dialog.hide();\n\n    if(_this.callback){\n        \n        var data = {\n            id : brick.imageObj.id,\n            filename : brick.imageObj.filename,\n            width : _this.setting_form.findField('width').getValue(),\n            height : _this.setting_form.findField('height').getValue(),\n            descript : _this.setting_form.findField('descript').getValue(),\n            align : _this.setting_form.findField('align').getValue()\n        };\n        \n        _this.callback.call(_this, data);\n        \n    }\n}"
 467                      },
 468                      "String weight" : "default",
 469                      "xtype" : "Button",
 470                      "$ xns" : "Roo.bootstrap",
 471                      "String html" : "<i class=\"fa fa-plus\"></i> Add into the email",
 472                      "name" : "add"
 473                     }
 474                    ]
 475                   }
 476                  ]
 477                 }
 478                ]
 479               }
 480              ]
 481             }
 482            ]
 483           }
 484          ]
 485         },
 486         {
 487          "xtype" : "Row",
 488          "$ xns" : "Roo.bootstrap",
 489          "items" : [
 490           {
 491            "Number md" : 12,
 492            "xtype" : "Column",
 493            "$ xns" : "Roo.bootstrap",
 494            "items" : [
 495             {
 496              "listeners" : {
 497               "render" : "function (_self)\n{\n    _this.detail_form = this;\n}"
 498              },
 499              "xtype" : "Form",
 500              "$ xns" : "Roo.bootstrap",
 501              "Boolean loadMask" : true,
 502              "$ String url" : "baseURL + '/Roo/Images'",
 503              "items" : [
 504               {
 505                "xtype" : "Container",
 506                "string header" : "Image Details",
 507                "$ xns" : "Roo.bootstrap",
 508                "String style" : "width: 100%; padding: 0",
 509                "$ string panel" : "'default'",
 510                "items" : [
 511                 {
 512                  "xtype" : "Row",
 513                  "$ xns" : "Roo.bootstrap",
 514                  "items" : [
 515                   {
 516                    "Number md" : 12,
 517                    "xtype" : "Column",
 518                    "$ xns" : "Roo.bootstrap",
 519                    "items" : [
 520                     {
 521                      "String name" : "filename",
 522                      "style" : "padding: 0;",
 523                      "xtype" : "Input",
 524                      "string fieldLabel" : "File Name:",
 525                      "cls" : "row-style",
 526                      "Boolean disabled" : true,
 527                      "$ xns" : "Roo.bootstrap",
 528                      "Number labelWidth" : 4
 529                     }
 530                    ]
 531                   }
 532                  ]
 533                 },
 534                 {
 535                  "xtype" : "Row",
 536                  "$ xns" : "Roo.bootstrap",
 537                  "items" : [
 538                   {
 539                    "Number md" : 12,
 540                    "xtype" : "Column",
 541                    "$ xns" : "Roo.bootstrap",
 542                    "String style" : "margin-top:15px;",
 543                    "items" : [
 544                     {
 545                      "String name" : "mimetype",
 546                      "xtype" : "Input",
 547                      "string fieldLabel" : "File Type:",
 548                      "cls" : "row-style",
 549                      "Boolean disabled" : true,
 550                      "$ xns" : "Roo.bootstrap",
 551                      "Number labelWidth" : 4
 552                     }
 553                    ]
 554                   }
 555                  ]
 556                 },
 557                 {
 558                  "xtype" : "Row",
 559                  "$ xns" : "Roo.bootstrap",
 560                  "items" : [
 561                   {
 562                    "Number md" : 12,
 563                    "xtype" : "Column",
 564                    "$ xns" : "Roo.bootstrap",
 565                    "String style" : "margin-top:15px;",
 566                    "items" : [
 567                     {
 568                      "String name" : "filesize",
 569                      "xtype" : "Input",
 570                      "string fieldLabel" : "File Size:",
 571                      "cls" : "row-style",
 572                      "Boolean disabled" : true,
 573                      "$ xns" : "Roo.bootstrap",
 574                      "Number labelWidth" : 4
 575                     }
 576                    ]
 577                   }
 578                  ]
 579                 },
 580                 {
 581                  "xtype" : "Row",
 582                  "$ xns" : "Roo.bootstrap",
 583                  "items" : [
 584                   {
 585                    "Number md" : 12,
 586                    "xtype" : "Column",
 587                    "$ xns" : "Roo.bootstrap",
 588                    "String style" : "margin-top:15px;",
 589                    "items" : [
 590                     {
 591                      "String name" : "created",
 592                      "xtype" : "Input",
 593                      "string fieldLabel" : "Created Date:",
 594                      "cls" : "row-style",
 595                      "Boolean disabled" : true,
 596                      "$ xns" : "Roo.bootstrap",
 597                      "Number labelWidth" : 4
 598                     }
 599                    ]
 600                   }
 601                  ]
 602                 },
 603                 {
 604                  "xtype" : "Row",
 605                  "$ xns" : "Roo.bootstrap",
 606                  "items" : [
 607                   {
 608                    "Number md" : 12,
 609                    "xtype" : "Column",
 610                    "$ xns" : "Roo.bootstrap",
 611                    "String style" : "margin-top:15px;",
 612                    "items" : [
 613                     {
 614                      "String name" : "descript",
 615                      "xtype" : "Input",
 616                      "string fieldLabel" : "Description:",
 617                      "cls" : "row-style",
 618                      "$ xns" : "Roo.bootstrap",
 619                      "Number labelWidth" : 4
 620                     }
 621                    ]
 622                   }
 623                  ]
 624                 },
 625                 {
 626                  "String name" : "id",
 627                  "xtype" : "Input",
 628                  "String inputType" : "hidden",
 629                  "$ xns" : "Roo.bootstrap"
 630                 },
 631                 {
 632                  "xtype" : "Row",
 633                  "$ xns" : "Roo.bootstrap",
 634                  "items" : [
 635                   {
 636                    "Number md" : 12,
 637                    "String cls" : "text-center",
 638                    "xtype" : "Column",
 639                    "$ xns" : "Roo.bootstrap",
 640                    "String style" : "margin-top:15px;",
 641                    "items" : [
 642                     {
 643                      "listeners" : {
 644                       "click" : "function (_self, e)\n{\n    _this.detail_form.doAction('submit');\n}"
 645                      },
 646                      "String weight" : "default",
 647                      "xtype" : "Button",
 648                      "$ xns" : "Roo.bootstrap",
 649                      "String html" : "<i class=\"fa fa-save\"></i> Save Changes"
 650                     }
 651                    ]
 652                   }
 653                  ]
 654                 }
 655                ]
 656               }
 657              ]
 658             }
 659            ]
 660           }
 661          ]
 662         }
 663        ]
 664       }
 665      ]
 666     }
 667    ]
 668   }
 669  ]
 670 }