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