1 //<script type="text/javascript">
4 Roo.box = Roo.box || {};
6 Roo.box.Action = function(cfg) {
8 this.midwidth = this.width - 24;
11 Roo.box.Action.prototype = {
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) {
30 this.el = Roo.get(this.id);
31 this.el.setVisibilityMode(Roo.Element.DISPLAY);
33 initTemplate : function()
35 if (Roo.box.Action.tmpl) {
40 Roo.box.Action.tmpl = new Roo.Template(
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"/>',
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>',
49 '<td class="x-action-box-top-right"/>',
52 '<td rowspan="2" class="x-action-box-right"/>',
55 '<td colspan="2" class="x-action-box-body">',
56 '<div style="width: {subwidth}px">{zitems:this.renderItems}</div>',
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>',
67 Roo.box.Action.tmpl.renderItems = function (v, allv) {
68 return Roo.box.Action.prototype.renderItems(v,allv); // ensure scope of this..
70 Roo.box.Action.tmpl.compile();
73 renderItems : function (items, obj) {
76 Roo.each(obj.items, function(o, i) {
77 obj.items[i] = Roo.factory(o, Roo.box);
79 ret += obj.items[i].render(obj);
86 Roo.each(this.items, function(o) {
107 Roo.box.Link = function(cfg) {
108 Roo.apply(this, cfg);
111 Roo.box.Link.prototype = {
118 render: function(obj) {
120 return Roo.DomHelper.markup({
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)
129 initHandler: function()
132 this.el = Roo.get(this.id);
133 this.el.setVisibilityMode(Roo.Element.DISPLAY);
135 if (this.el && this.handler) {
136 Roo.get(this.id).on('click', this.handler);
151 setValue: function(v) {
156 Roo.get(this.edid).dom.innerHTML = v; // unfiltered..
161 Roo.box.Hr = function(cfg) {
162 Roo.apply(this, cfg);
166 Roo.extend(Roo.box.Hr, Roo.box.Link , {
169 render: function(obj) {
170 return '<div class="x-action-box-hr"></div>'
174 Roo.box.KeyValShort = function(cfg) {
175 Roo.apply(this, cfg);
179 Roo.extend(Roo.box.KeyValShort, Roo.box.Link , {
184 render: function(obj) {
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);
196 Roo.box.KeyValLong = function(cfg) {
197 Roo.apply(this, cfg);
201 Roo.extend(Roo.box.KeyValLong, Roo.box.Link , {
206 render: function(obj) {
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');