git.roojs.org Git - Pman.Core/blob - widgets/ActionBox.js

   1 //<script type="text/javascript">
   2
   3
   4 Roo.box = Roo.box || {};
   5
   6 Roo.box.Action = function(cfg) {
   7     Roo.apply(this, cfg);
   8     this.midwidth = this.width - 24;
   9 };
  10
  11 Roo.box.Action.prototype = {
  12
  13     width : 240,
  14     items : [],
  15     midwidth : 218,
  16     title : '',
  17     zitems: '',
  18     cls : '',
  19     render : function(el)
  20     {
  21
  22         this.initTemplate();
  23         this.id = Roo.id();
  24         this.midwidth = this.width - 22;
  25         this.subwidth = this.midwidth-18;
  26         Roo.box.Action.tmpl.append(el, this);
  27         Roo.each(this.items, function(o, i) {
  28             o.initHandler();
  29         });
  30         this.el = Roo.get(this.id);
  31         this.el.setVisibilityMode(Roo.Element.DISPLAY);
  32     },
  33     initTemplate : function()
  34     {
  35         if (Roo.box.Action.tmpl) {
  36             return;
  37         }
  38
  39
  40         Roo.box.Action.tmpl = new Roo.Template(
  41
  42             '<table id="{id}" style="width: {width}px; border-collapse: collapse;" class="x-action-box {cls}">',
  43                 '<col width="12"/><col width="{midwidth}"/><col width="12"/>',
  44                 '<tbody>',
  45                     '<tr>',
  46                         '<td rowspan="2" colspan="2" class="x-action-box-header x-action-box-small-header">',
  47                             '<div class="x-action-box-properties-header">{title}</div>',
  48                         '</td>',
  49                         '<td class="x-action-box-top-right"/>',
  50                     '</tr>',
  51                 '<tr>',
  52                     '<td rowspan="2" class="x-action-box-right"/>',
  53                 '</tr>',
  54                 '<tr>',
  55                     '<td colspan="2" class="x-action-box-body">',
  56                         '<div style="width: {subwidth}px">{zitems:this.renderItems}</div>',
  57                     '</td>',
  58                 '</tr>',
  59                 '<tr>',
  60                     '<td style="width: 12px;" class="x-action-box-bottom-left"></td>',
  61                     '<td style="width: {midwidth}px;" class="x-action-box-bottom"/>',
  62                     '<td style="width: 12px;" class="x-action-box-bottom-right"></td>',
  63                 '</tr>',
  64             '</tbody>',
  65             '</table>'
  66         );
  67         Roo.box.Action.tmpl.renderItems = function (v, allv) {
  68             return Roo.box.Action.prototype.renderItems(v,allv); // ensure scope of this..
  69         };
  70         Roo.box.Action.tmpl.compile();
  71
  72     },
  73     renderItems : function (items, obj) {
  74         var ret = '';
  75         //console.log(obj);
  76         Roo.each(obj.items, function(o, i) {
  77             obj.items[i] =  Roo.factory(o, Roo.box);
  78
  79             ret += obj.items[i].render(obj);
  80         });
  81         //console.log(ret);
  82         return ret;
  83     },
  84     get : function(n) {
  85         var ret = false;
  86         Roo.each(this.items, function(o) {
  87             if (o.name == n) {
  88                 ret = o;
  89                 return false;
  90             }
  91         });
  92         return ret;
  93     },
  94     hide: function()
  95     {
  96         this.el.hide();
  97     },
  98     show: function()
  99     {
 100         this.el.show();
 101     }
 102
 103
 104
 105 };
 106
 107 Roo.box.Link = function(cfg) {
 108     Roo.apply(this, cfg);
 109 };
 110
 111 Roo.box.Link.prototype = {
 112     name : false,
 113     handler : false,
 114     id : false,
 115     title : 'empty',
 116     el: false,
 117     icon : false,
 118     render: function(obj) {
 119         this.id = Roo.id();
 120         return Roo.DomHelper.markup({
 121             tag: 'div',
 122             id : this.id,
 123             cls : 'x-action-box-action x-action-ico-edit',
 124             style : 'display: block;' + ( this.icon ? 'background-image: url(' + this.icon + ');' : ''),
 125             html : String.format('{0}', this.title)
 126         });
 127
 128     },
 129     initHandler: function()
 130     {
 131         if (this.id) {
 132             this.el = Roo.get(this.id);
 133             this.el.setVisibilityMode(Roo.Element.DISPLAY);
 134         }
 135         if (this.el && this.handler) {
 136             Roo.get(this.id).on('click', this.handler);
 137         }
 138
 139     },
 140
 141     hide: function() {
 142         if (this.el) {
 143             this.el.hide();
 144         }
 145     },
 146     show: function() {
 147         if (this.el) {
 148             this.el.show();
 149         }
 150     },
 151     setValue: function(v) {
 152         if (!this.edid) {
 153             return;
 154         }
 155         this.value = v;
 156         Roo.get(this.edid).dom.innerHTML = v; // unfiltered..
 157     }
 158
 159
 160 };
 161 Roo.box.Hr = function(cfg) {
 162     Roo.apply(this, cfg);
 163
 164 };
 165
 166 Roo.extend(Roo.box.Hr, Roo.box.Link , {
 167     handler : false,
 168     id : false,
 169     render: function(obj) {
 170         return  '<div  class="x-action-box-hr"></div>'
 171     }
 172 });
 173
 174 Roo.box.KeyValShort = function(cfg) {
 175     Roo.apply(this, cfg);
 176
 177 };
 178
 179 Roo.extend(Roo.box.KeyValShort, Roo.box.Link , {
 180     handler : false,
 181     id : false,
 182     key: 'key',
 183     value : 'value',
 184     render: function(obj) {
 185         this.id = Roo.id();
 186         this.edid = Roo.id();
 187         return  String.format('<div id="{3}" class="x-action-prop-col-div">' +
 188                 '<span style="font-weight: bolder;">{0}: </span><span id="{2}">{1}</span></div>',
 189             this.key, this.value, this.edid,this.id);
 190     }
 191 });
 192
 193
 194
 195
 196 Roo.box.KeyValLong = function(cfg) {
 197     Roo.apply(this, cfg);
 198
 199 };
 200
 201 Roo.extend(Roo.box.KeyValLong, Roo.box.Link , {
 202     handler : false,
 203     id : false,
 204     key: 'key',
 205     value : 'value',
 206     render: function(obj) {
 207         this.id = Roo.id();
 208         this.edid = Roo.id();
 209         return  String.format('<span id="{3}"><span style="color: rgb(51, 51, 51); font-weight: bolder;">{0}</span><br/>'+
 210             '<div id="{2}" style="padding-left: 10px; overflow:hidden;">{1} </div></span>',
 211             this.key, this.value, this.edid,this.id).replace(/\n/g, '<BR/>\n');
 212     }
 213 });
 214