PDA

View Full Version : Display Field for Form



tomalex0
15 Sep 2010, 9:03 AM
I was looking for DisplayField inside in form, so i made a try to Extend. So far its working fine for me.

I have posted my earlier code in
http://www.sencha.com/forum/showthread.php?108754-DISCUSS-Form-Display-Field.

Main thing if found interesting was that when the form is posted the value associated with displayfield could be passed to server side.


Extension


Ext.form.DisplayField = Ext.extend(Ext.form.Field, {
ui: 'slider',
/**
* Set to true on all Ext.form.Field subclasses. This is used by {@link Ext.form.FormPanel#getValues} to determine which
* components inside a form are fields.
* @property isField
* @type Boolean
*/
isField: true,

isFormField : true,

/**
* @cfg {Boolean/Function/Object} disclosure
* True to display a disclosure icon on each list item.
* This is just to show the disclosure icon to indicate a list is associated with the displayfield
*/
disclosure : true,

/**
* @cfg {String} disclosureCls The CSS class to use to change disclosure icon image and its properties)
*/
disclosureCls : 'x-field-disclosure',
/**
* @cfg {String} inputCls Overrides {@link Ext.form.Field}'s inputCls. Defaults to 'x-slider'
*/
inputCls: 'x-displayfield',

initComponent : function() {
this.addEvents('displaytap');
Ext.form.DisplayField.superclass.initComponent.call(this);

},

afterRender: function() {
Ext.form.DisplayField.superclass.afterRender.call(this);
this.mon(this.fieldEl, {
tap: this.onTap,
scope: this
});
if(this.disclosure){
this.tagspec = {tag : 'div',cls : 'x-disclosure '+this.disclosureCls}
Ext.DomHelper.insertAfter(this.fieldEl,this.tagspec);
}
},


onTap : function(e){
this.fireEvent('displaytap',this.originalValue,this.getValue());
},

/**
* True to set the field DOM element autocorrect attribute to "on", false to set to "off". Defaults to undefined, leaving the attribute unset.
* @cfg {Boolean} autoCorrect
*/

renderTpl: [
'<tpl if="label">',
'<label <tpl if="fieldEl">for="{inputId}"</tpl>>{label}</label>',
'</tpl>',
'<div>',
'<tpl if="fieldEl">',
'<div id="{inputId}" name="{name}" class="{fieldCls}""',
'<tpl if="style">style="{style}" </tpl>',
'></div></tpl>',
'</div>',
'<div class="x-field-mask"></div>'
],


/**
* Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
* @return {Mixed} value The field value
*/
getValue : function(){
if (!this.rendered || !this.fieldEl) {

return this.dom.innerHTML;
}

return this.fieldEl.dom.innerHTML || '';
},

/**
* Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
* @param {Mixed} value The value to set
* @return {Ext.form.DisplayField} this
*/
setValue : function(v){
this.value = v;
if (this.rendered && this.fieldEl) {
this.fieldEl.dom.innerHTML = (Ext.isEmpty(v) ? '' : v);
}
return this;
}
});

Ext.reg('displayfield', Ext.form.DisplayField);



CSS


.x-field-slider .x-displayfield {
position: relative;
overflow: hidden;
height: 2.5em;
width:100%;
margin: 0 .5em;
padding-top : 0.7em;
float:left;
z-index:1;
}
.x-field-disclosure{
position:absolute;
top:0;
right:0.3em;
margin-top:0.4em;
}


Examples


{
xtype: 'displayfield',
name : 'name',
label: 'Name',
autoCapitalize : false,
value : 'test',
listeners :{
displaytap : function(o,v){
alert(o+"-----"+v);
}
}
}


Features


1. Tap Event for displayfield
2. Disclosure image similar to List.


My actual requirement was to show a List when tapped on the displayField and after selecting value from the list the displayfield will be updated with that value.

tomalex0
8 Oct 2010, 8:19 AM
Have updated the display field code w.r.t to 0.96



Ext.form.DisplayField = Ext.extend(Ext.form.Field, {
/**
* Set to true on all Ext.form.Field subclasses. This is used by {@link Ext.form.FormPanel#getValues} to determine which
* components inside a form are fields.
* @property isField
* @type Boolean
*/
isField: true,

isFormField : true,

/**
* @cfg {Boolean/Function/Object} disclosure
* True to display a disclosure icon on each list item.
* This is just to show the disclosure icon to indicate a list is associated with the displayfield
*/
disclosure : true,

/**
* @cfg {String} disclosureCls The CSS class to use to change disclosure icon image and its properties)
*/
disclosureCls : 'x-field-disclosure',
/**
* @cfg {String} inputCls Overrides {@link Ext.form.Field}'s inputCls. Defaults to 'x-slider'
*/
inputCls: 'x-displayfield',

initComponent : function() {
this.addEvents('displaytap');
Ext.form.DisplayField.superclass.initComponent.call(this);

},

afterRender: function() {
Ext.form.DisplayField.superclass.afterRender.call(this);
this.mon(this.el, {
tap: this.onTap,
scope: this
});
if(this.disclosure){
this.tagspec = {tag : 'div',cls : 'x-disclosure '+this.disclosureCls}
Ext.DomHelper.insertAfter(this.fieldEl,this.tagspec);
}
},


onTap : function(e){
this.fireEvent('displaytap',this.originalValue,this.getValue());
},

/**
* True to set the field DOM element autocorrect attribute to "on", false to set to "off". Defaults to undefined, leaving the attribute unset.
* @cfg {Boolean} autoCorrect
*/

renderTpl: [
'<tpl if="label">',
'<label <tpl if="fieldEl">for="{inputId}"</tpl> class="x-form-label"><span>{label}</span></label>',
'</tpl>',
'<tpl if="fieldEl">',
'<div id="{inputId}" name="{name}" class="{fieldCls}"',
'<tpl if="style">style="{style}" </tpl>',
'></div></tpl>',
'<div class="x-field-mask"></div>'
],


/**
* Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}.
* @return {Mixed} value The field value
*/
getValue : function(){
if (!this.rendered || !this.fieldEl) {

return this.dom.innerHTML;
}

return this.fieldEl.dom.innerHTML || '';
},

/**
* Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}.
* @param {Mixed} value The value to set
* @return {Ext.form.DisplayField} this
*/
setValue : function(v){
this.value = v;
if (this.rendered && this.fieldEl) {
this.fieldEl.dom.innerHTML = (Ext.isEmpty(v) ? '' : v);
}
return this;
}
});

Ext.reg('displayfield', Ext.form.DisplayField);



CSS


.x-displayfield {
background-color:white;
padding: 0 .5em;
padding-top : 0.7em;
text-overflow: ellipsis;
overflow:hidden;
white-space: nowrap;
display: block;
font-weight:100 !important;
}
.x-field-disclosure{
position:absolute;
top:0;
right:0.8em;
margin-top:0.4em;
}



Updated Features.


Added tap event for whole field.
Tackled text overflow

armode
10 Feb 2012, 1:31 AM
Hi,

how can I get a displayfield working in ST2?
There are several things deprecated and at the moment I got an error at the DomHelper element....

Is there another way in ST2 to get a "displayfield" or has someone fixed it?

Thanks

tomalex0
10 Feb 2012, 10:00 AM
I dont' think we need something complex as above mentioned to implement a displayfield. You can use readOnly property to implement this. If you want it more like a component in ST2.



Ext.define('Ext.ux.displayfield', {
extend : 'Ext.field.Text',
alias : 'widget.displayfield',
xtype : 'displayfield',
config : {
readOnly : true,
clearIcon: false
}
});

armode
13 Feb 2012, 12:21 AM
Thanks that works fine!

Do you know how to insert the disclosure icon?

I appreciate your help...

diego.girotto
3 Mar 2012, 6:35 AM
add a css to your page like this

.x-field-disclosure{
position:absolute;
top:0;
right:0.8em;
margin-top:0.4em;
overflow:visible;
background-image:url(../images/image.png) !important;
-webkit-mask: 0 0 url(../images/image.png) !important;
background-color:transparent !important;
-webkit-mask-size: 1.7em;
width: 1.7em;
height: 1.7em;
}

you have to change the "image.png" with the right image

armode
5 Mar 2012, 5:58 AM
Thanks for your help, but there's no div with a class named 'x-field-disclosure' at the moment, so I have to add one via the config part?

tomalex0
5 Mar 2012, 7:55 PM
Try this


Ext.define('Ext.ux.displayfield', {
extend : 'Ext.field.Text',
alias : 'widget.displayfield',
xtype : 'displayfield',
config : {
readOnly : true,
clearIcon: false,
component: {
useMask: true
},
ui : 'select disclose'
}
});




.x-field-disclose .x-component-outer::after {
content: "";
position: absolute;
width: 1.7em;
height: 1.7em;
top: 37%;
left: auto;
right: 0.7em;
-webkit-mask-size: 1.7em;
-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNkNCM0JGNTZFMjI2ODExQkNGQjkwMzk3MDc3MkZFQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3M0MzQUU1QUFDQkQxMURGOEQ2MUVDMjM0MzY2NTBDQSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3M0MzQUU1OUFDQkQxMURGOEQ2MUVDMjM0MzY2NTBDQSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3Q0IzQkY1NkUyMjY4MTFCQ0ZCOTAzOTcwNzcyRkVCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2Q0IzQkY1NkUyMjY4MTFCQ0ZCOTAzOTcwNzcyRkVCIi8+IDwvcmRmOkRlc2NyaXB0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');
margin-top: -0.5em;
background-color: #006BB6;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #50B7FF), color-stop(2%, #0080DA), color-stop(100%, #005692));
background-image: -webkit-linear-gradient(#50B7FF,#0080DA 2%,#005692);
background-image: linear-gradient(#50B7FF,#0080DA 2%,#005692);
}

armode
6 Mar 2012, 5:13 AM
Thanks for your help, works fine! :D

RaykoComSC
24 Feb 2014, 12:05 AM
Thank you.