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