* @class Roo.form.DisplayField
* @extends Roo.form.Field
* A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
* @constructor
* Creates a new Display Field item.
* @param {Object} config Configuration options
*/
-Roo.form.DisplayText = function(config){
- Roo.form.DisplayText.superclass.constructor.call(this, config);
+Roo.form.DisplayField = function(config){
+ Roo.form.DisplayField.superclass.constructor.call(this, config);
+ this.addEvents({
+ /**
+ * @event close
+ * Fires after the click the close btn
+ * @param {Roo.form.DisplayField} this
+ */
+ close : true
+ });
};
-Roo.extend(Roo.form.DisplayText, Roo.form.Field, {
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField, {
+ inputType: 'hidden',
+ allowBlank: true,
+ readOnly: true,
+
+
/**
* @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
fieldClass: 'x-form-field',
/**
- * @cfg {Function} renderer The renderer for the field (so you can reformat output). should return raw HTML
+ * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
*/
- renderer: undefined,
+ valueRenderer: undefined,
width: 100,
/**
* {tag: "input", type: "checkbox", autocomplete: "off"})
*/
- defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
-
+ // defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+
+ closable : false,
+
onResize : function(){
- Roo.form.Field.superclass.onResize.apply(this, arguments);
+ Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
},
initEvents : function(){
// Roo.form.Checkbox.superclass.initEvents.call(this);
// has no events...
+
+ if(this.closable){
+ this.closeEl.on('click', this.onClose, this);
+ }
},
// private
onRender : function(ct, position){
- Roo.form.DisplayText.superclass.onRender.call(this, ct, position);
+
+ Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
//if(this.inputValue !== undefined){
+ this.wrap = this.el.wrap();
+ this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
- this.wrap = this.el.wrap();
- this.viewEl = this.wrap.createChild({ tag: 'div'});
+ if(this.closable){
+ this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
+ }
if (this.bodyStyle) {
this.viewEl.applyStyles(this.bodyStyle);
this.setValue(this.value);
},
-
+/*
// private
initValue : Roo.emptyFn,
-
+ */
// private
onClick : function(){
*/
setValue : function(v){
this.value = v;
- var html = this.renderer ? this.renderer(v) : String.format('{0}', v);
+ var html = this.valueRenderer ? this.valueRenderer(v) : String.format('{0}', v);
+ // this might be called before we have a dom element..
+ if (!this.viewEl) {
+ return;
+ }
this.viewEl.dom.innerHTML = html;
- Roo.form.DisplayText.superclass.setValue.call(this, v);
+ Roo.form.DisplayField.superclass.setValue.call(this, v);
+ },
+
+ onClose : function(e)
+ {
+ e.preventDefault();
+
+ this.fireEvent('close', this);
}
});
\ No newline at end of file