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        "listeners" : {
  74         "render" : "function (_self)\n{\n    _this.masonryBlock = this;\n}"
  75        },
  76        "Number md" : 12,
  77        "xtype" : "Column",
  78        "$ xns" : "Roo.bootstrap",
  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.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",
  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.showType == 'private') ? _this.data.onid : 0);\n        _this.form.doAction('submit');\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          "String cls" : "col-md-12",
 148          "xtype" : "Container",
 149          "$ xns" : "Roo.bootstrap",
 150          "items" : [
 151           {
 152            "listeners" : {
 153             "render" : "function (_self)\n{\n    _this.toolbar = this;\n}"
 154            },
 155            "xtype" : "Row",
 156            "$ xns" : "Roo.bootstrap",
 157            "items" : [
 158             {
 159              "Number md" : 8,
 160              "xtype" : "Column",
 161              "$ xns" : "Roo.bootstrap",
 162              "Number sm" : 12,
 163              "items" : [
 164               {
 165                "xtype" : "Button",
 166                "$ xns" : "Roo.bootstrap",
 167                "String html" : "<i class=\"fa fa-filter\"></i> Filter",
 168                "items" : [
 169                 {
 170                  "xtype" : "Menu",
 171                  "$ xns" : "Roo.bootstrap",
 172                  "* prop" : "menu",
 173                  "items" : [
 174                   {
 175                    "listeners" : {
 176                     "click" : "function (_self, e)\n{\n    _this.showType = 'private';\n    \n    _this.masonry.load();\n}"
 177                    },
 178                    "Boolean preventDefault" : true,
 179                    "xtype" : "MenuItem",
 180                    "$ xns" : "Roo.bootstrap",
 181                    "Boolean isContainer" : false,
 182                    "String html" : "Show images for this email"
 183                   },
 184                   {
 185                    "listeners" : {
 186                     "click" : "function (_self, e)\n{\n    _this.showType = 'public';\n    \n    _this.masonry.load();\n}"
 187                    },
 188                    "Boolean preventDefault" : true,
 189                    "xtype" : "MenuItem",
 190                    "$ xns" : "Roo.bootstrap",
 191                    "Boolean isContainer" : false,
 192                    "String html" : "Show all images"
 193                   }
 194                  ]
 195                 }
 196                ]
 197               },
 198               {
 199                "listeners" : {
 200                 "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}",
 201                 "render" : "function (_self)\n{\n    _this.searchBox = this;\n}"
 202                },
 203                "xtype" : "Input",
 204                "string placeholder" : "search for image",
 205                "$ xns" : "Roo.bootstrap",
 206                "String style" : "width: 200px; margin-left: 15px;display: inline-block; margin-bottom: 0px; vertical-align: middle;",
 207                "items" : [
 208                 {
 209                  "listeners" : {
 210                   "click" : "function (_self, e)\n{\n    _this.masonry.clearAll();\n    _this.masonry.load();\n}"
 211                  },
 212                  "xtype" : "Button",
 213                  "$ xns" : "Roo.bootstrap",
 214                  "String html" : "<i class=\"fa fa-search\"></i>",
 215                  "* prop" : "after"
 216                 }
 217                ]
 218               }
 219              ]
 220             },
 221             {
 222              "Number md" : 4,
 223              "String cls" : "text-right",
 224              "xtype" : "Column",
 225              "$ xns" : "Roo.bootstrap",
 226              "Number sm" : 12,
 227              "items" : [
 228               {
 229                "listeners" : {
 230                 "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}"
 231                },
 232                "String size" : "sm",
 233                "xtype" : "Button",
 234                "$ xns" : "Roo.bootstrap",
 235                "String html" : "<i class=\"fa fa-upload\"></i> Upload Image",
 236                "string weight" : "primary"
 237               },
 238               {
 239                "listeners" : {
 240                 "render" : "function (_self)\n{\n    _this.deleteBtn = this;\n    \n    this.hide();\n}",
 241                 "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}"
 242                },
 243                "String size" : "sm",
 244                "String weight" : "default",
 245                "xtype" : "Button",
 246                "$ xns" : "Roo.bootstrap",
 247                "String html" : "<i class=\"fa fa-trash\"></i> Delete",
 248                "String style" : "margin-left: 15px;"
 249               }
 250              ]
 251             }
 252            ]
 253           },
 254           {
 255            "listeners" : {
 256             "render" : "function (_self)\n{\n    _this.document_container = this;\n    \n    this.el.setStyle('overflow', 'auto');\n}"
 257            },
 258            "xtype" : "Row",
 259            "$ xns" : "Roo.bootstrap",
 260            "String style" : "margin-top: 15px;",
 261            "items" : [
 262             {
 263              "Number md" : 12,
 264              "xtype" : "Column",
 265              "$ xns" : "Roo.bootstrap",
 266              "items" : [
 267               {
 268                "listeners" : {
 269                 "render" : "function (_self)\n{\n    _this.masonry = this;\n    \n}"
 270                },
 271                "Boolean isLayoutInstant" : false,
 272                "| 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    var params = {\n        ontable : 'core_email',\n        'search[filename]' : _this.searchBox.getValue()\n    };\n    \n    if(_this.showType == 'private'){\n        params.onid = _this.data.onid;\n    }\n    \n    new Pman.Request({\n        url: baseURL + '/Roo/Images',\n        method: 'GET',\n        params: params,\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                            _this.masonryBlock.el.removeClass(['col-md-12','col-md-8']).addClass('col-md-12');\n                            \n                            if(!this.isSelected()){\n                                return;\n                            }\n                            \n                            _this.masonryBlock.el.removeClass(['col-md-12','col-md-8']).addClass('col-md-8');\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}",
 273                "Number boxWidth" : 250,
 274                "xtype" : "LayoutMasonry",
 275                "$ xns" : "Roo.bootstrap",
 276                "string activeClass" : "active",
 277                "Boolean isAutoInitial" : false
 278               }
 279              ]
 280             }
 281            ]
 282           }
 283          ]
 284         }
 285        ]
 286       },
 287       {
 288        "Number md" : 4,
 289        "xtype" : "Column",
 290        "$ xns" : "Roo.bootstrap",
 291        "items" : [
 292         {
 293          "xtype" : "Row",
 294          "$ xns" : "Roo.bootstrap",
 295          "items" : [
 296           {
 297            "Number md" : 12,
 298            "xtype" : "Column",
 299            "$ xns" : "Roo.bootstrap",
 300            "items" : [
 301             {
 302              "listeners" : {
 303               "render" : "function (_self)\n{\n    _this.setting_form = this;\n}"
 304              },
 305              "$ string url" : "baseURL + '/Roo/Images'\n",
 306              "xtype" : "Form",
 307              "$ xns" : "Roo.bootstrap",
 308              "Boolean loadMask" : true,
 309              "items" : [
 310               {
 311                "String header" : "Add Images with Settings",
 312                "$ String panel" : "'default'",
 313                "xtype" : "Container",
 314                "$ xns" : "Roo.bootstrap",
 315                "String style" : "width: 100%;",
 316                "items" : [
 317                 {
 318                  "xtype" : "Row",
 319                  "$ xns" : "Roo.bootstrap",
 320                  "items" : [
 321                   {
 322                    "Number md" : 12,
 323                    "xtype" : "Column",
 324                    "$ xns" : "Roo.bootstrap",
 325                    "items" : [
 326                     {
 327                      "String name" : "descript",
 328                      "xtype" : "Input",
 329                      "string fieldLabel" : "Alternate Text:",
 330                      "cls" : "row-style",
 331                      "$ xns" : "Roo.bootstrap",
 332                      "Number labelWidth" : 4
 333                     }
 334                    ]
 335                   }
 336                  ]
 337                 },
 338                 {
 339                  "xtype" : "Row",
 340                  "$ xns" : "Roo.bootstrap",
 341                  "items" : [
 342                   {
 343                    "Number md" : 12,
 344                    "xtype" : "Column",
 345                    "$ xns" : "Roo.bootstrap",
 346                    "String style" : "margin-top:15px;",
 347                    "items" : [
 348                     {
 349                      "String name" : "height",
 350                      "xtype" : "Input",
 351                      "string fieldLabel" : "Height:",
 352                      "cls" : "row-style",
 353                      "$ xns" : "Roo.bootstrap",
 354                      "Number labelWidth" : 4
 355                     }
 356                    ]
 357                   }
 358                  ]
 359                 },
 360                 {
 361                  "xtype" : "Row",
 362                  "$ xns" : "Roo.bootstrap",
 363                  "items" : [
 364                   {
 365                    "Number md" : 12,
 366                    "xtype" : "Column",
 367                    "$ xns" : "Roo.bootstrap",
 368                    "String style" : "margin-top:15px;",
 369                    "items" : [
 370                     {
 371                      "String name" : "width",
 372                      "xtype" : "Input",
 373                      "string fieldLabel" : "Width: ",
 374                      "cls" : "row-style",
 375                      "$ xns" : "Roo.bootstrap",
 376                      "Number labelWidth" : 4
 377                     }
 378                    ]
 379                   }
 380                  ]
 381                 },
 382                 {
 383                  "xtype" : "Row",
 384                  "$ xns" : "Roo.bootstrap",
 385                  "items" : [
 386                   {
 387                    "Number md" : 12,
 388                    "xtype" : "Column",
 389                    "$ xns" : "Roo.bootstrap",
 390                    "String style" : "margin-top:15px;",
 391                    "items" : [
 392                     {
 393                      "Boolean allowBlank" : true,
 394                      "Boolean selectOnFocus" : true,
 395                      "String name" : "align",
 396                      "String mode" : "local",
 397                      "String valueField" : "code",
 398                      "xtype" : "ComboBox",
 399                      "Boolean editable" : false,
 400                      "String triggerAction" : "all",
 401                      "string fieldLabel" : "Alignment:",
 402                      "Boolean alwaysQuery" : true,
 403                      "cls" : "row-style",
 404                      "$ xns" : "Roo.bootstrap",
 405                      "Number labelWidth" : 4,
 406                      "String displayField" : "value",
 407                      "Boolean forceSelection" : true,
 408                      "items" : [
 409                       {
 410                        "$ Array fields" : "['code', 'value']",
 411                        "xtype" : "SimpleStore",
 412                        "$ xns" : "Roo.data",
 413                        "* prop" : "store",
 414                        "| Array data" : "[\n    ['left', 'left'],\n    ['right', 'right'],\n    ['middle', 'middle'],\n    ['top', 'top'],\n    ['bottom', 'bottom']\n]"
 415                       }
 416                      ]
 417                     }
 418                    ]
 419                   }
 420                  ]
 421                 },
 422                 {
 423                  "xtype" : "Row",
 424                  "$ xns" : "Roo.bootstrap",
 425                  "items" : [
 426                   {
 427                    "Number md" : 12,
 428                    "String cls" : "text-center",
 429                    "xtype" : "Column",
 430                    "$ xns" : "Roo.bootstrap",
 431                    "String style" : "margin-top:15px;",
 432                    "items" : [
 433                     {
 434                      "listeners" : {
 435                       "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}"
 436                      },
 437                      "String weight" : "default",
 438                      "xtype" : "Button",
 439                      "$ xns" : "Roo.bootstrap",
 440                      "String html" : "<i class=\"fa fa-plus\"></i> Add into the email",
 441                      "name" : "add"
 442                     }
 443                    ]
 444                   }
 445                  ]
 446                 }
 447                ]
 448               }
 449              ]
 450             }
 451            ]
 452           }
 453          ]
 454         },
 455         {
 456          "xtype" : "Row",
 457          "$ xns" : "Roo.bootstrap",
 458          "items" : [
 459           {
 460            "Number md" : 12,
 461            "xtype" : "Column",
 462            "$ xns" : "Roo.bootstrap",
 463            "items" : [
 464             {
 465              "listeners" : {
 466               "render" : "function (_self)\n{\n    _this.detail_form = this;\n}"
 467              },
 468              "xtype" : "Form",
 469              "$ xns" : "Roo.bootstrap",
 470              "Boolean loadMask" : true,
 471              "$ String url" : "baseURL + '/Roo/Images'",
 472              "items" : [
 473               {
 474                "xtype" : "Container",
 475                "string header" : "Image Details",
 476                "$ xns" : "Roo.bootstrap",
 477                "String style" : "width: 100%; padding: 0",
 478                "$ string panel" : "'default'",
 479                "items" : [
 480                 {
 481                  "xtype" : "Row",
 482                  "$ xns" : "Roo.bootstrap",
 483                  "items" : [
 484                   {
 485                    "Number md" : 12,
 486                    "xtype" : "Column",
 487                    "$ xns" : "Roo.bootstrap",
 488                    "items" : [
 489                     {
 490                      "String name" : "filename",
 491                      "style" : "padding: 0;",
 492                      "xtype" : "Input",
 493                      "string fieldLabel" : "File Name:",
 494                      "cls" : "row-style",
 495                      "Boolean disabled" : true,
 496                      "$ xns" : "Roo.bootstrap",
 497                      "Number labelWidth" : 4
 498                     }
 499                    ]
 500                   }
 501                  ]
 502                 },
 503                 {
 504                  "xtype" : "Row",
 505                  "$ xns" : "Roo.bootstrap",
 506                  "items" : [
 507                   {
 508                    "Number md" : 12,
 509                    "xtype" : "Column",
 510                    "$ xns" : "Roo.bootstrap",
 511                    "String style" : "margin-top:15px;",
 512                    "items" : [
 513                     {
 514                      "String name" : "mimetype",
 515                      "xtype" : "Input",
 516                      "string fieldLabel" : "File Type:",
 517                      "cls" : "row-style",
 518                      "Boolean disabled" : true,
 519                      "$ xns" : "Roo.bootstrap",
 520                      "Number labelWidth" : 4
 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                    "String style" : "margin-top:15px;",
 535                    "items" : [
 536                     {
 537                      "String name" : "filesize",
 538                      "xtype" : "Input",
 539                      "string fieldLabel" : "File Size:",
 540                      "cls" : "row-style",
 541                      "Boolean disabled" : true,
 542                      "$ xns" : "Roo.bootstrap",
 543                      "Number labelWidth" : 4
 544                     }
 545                    ]
 546                   }
 547                  ]
 548                 },
 549                 {
 550                  "xtype" : "Row",
 551                  "$ xns" : "Roo.bootstrap",
 552                  "items" : [
 553                   {
 554                    "Number md" : 12,
 555                    "xtype" : "Column",
 556                    "$ xns" : "Roo.bootstrap",
 557                    "String style" : "margin-top:15px;",
 558                    "items" : [
 559                     {
 560                      "String name" : "created",
 561                      "xtype" : "Input",
 562                      "string fieldLabel" : "Created Date:",
 563                      "cls" : "row-style",
 564                      "Boolean disabled" : true,
 565                      "$ xns" : "Roo.bootstrap",
 566                      "Number labelWidth" : 4
 567                     }
 568                    ]
 569                   }
 570                  ]
 571                 },
 572                 {
 573                  "xtype" : "Row",
 574                  "$ xns" : "Roo.bootstrap",
 575                  "items" : [
 576                   {
 577                    "Number md" : 12,
 578                    "xtype" : "Column",
 579                    "$ xns" : "Roo.bootstrap",
 580                    "String style" : "margin-top:15px;",
 581                    "items" : [
 582                     {
 583                      "String name" : "descript",
 584                      "xtype" : "Input",
 585                      "string fieldLabel" : "Description:",
 586                      "cls" : "row-style",
 587                      "$ xns" : "Roo.bootstrap",
 588                      "Number labelWidth" : 4
 589                     }
 590                    ]
 591                   }
 592                  ]
 593                 },
 594                 {
 595                  "String name" : "id",
 596                  "xtype" : "Input",
 597                  "String inputType" : "hidden",
 598                  "$ xns" : "Roo.bootstrap"
 599                 },
 600                 {
 601                  "xtype" : "Row",
 602                  "$ xns" : "Roo.bootstrap",
 603                  "items" : [
 604                   {
 605                    "Number md" : 12,
 606                    "String cls" : "text-center",
 607                    "xtype" : "Column",
 608                    "$ xns" : "Roo.bootstrap",
 609                    "String style" : "margin-top:15px;",
 610                    "items" : [
 611                     {
 612                      "listeners" : {
 613                       "click" : "function (_self, e)\n{\n    _this.detail_form.doAction('submit');\n}"
 614                      },
 615                      "String weight" : "default",
 616                      "xtype" : "Button",
 617                      "$ xns" : "Roo.bootstrap",
 618                      "String html" : "<i class=\"fa fa-save\"></i> Save Changes"
 619                     }
 620                    ]
 621                   }
 622                  ]
 623                 }
 624                ]
 625               }
 626              ]
 627             }
 628            ]
 629           }
 630          ]
 631         }
 632        ]
 633       }
 634      ]
 635     }
 636    ]
 637   }
 638  ]
 639 }