PDA

View Full Version : How can I prevent readonly form field from being selectable?



nickweavers
10 Nov 2009, 7:33 PM
Two questions really, I would like to offer a visual clue that a form field containing a db table index is readonly (it is just there for info) as well as making it so with the readOnly config option.
I have seen this done elsewhere by giving readonly fields a light gray background, so at the moment I am using the style config option to set the form field background colour to #CCCCCC, but would like to know if there is a better way?

Second question is related to the fact that although I have set the field to readOnly, I can still select it. Can I prevent the field from being selectable somehow?

Maybe a better way would be to create a box that is not an actually a form input, but that still lines up with the other input boxes for neatness.

And help appreciated.

Nick.

jcabrera
10 Nov 2009, 8:16 PM
that's the answer to both questions. remember that disabled fileds does not submit...
disabled : true

nickweavers
11 Nov 2009, 3:43 AM
Thanks @jcabrera. That looks much better. However, since I do actually need this field to be submitted (it is used in the sql update query to select the correct record), I need to duplicate this field to create a copy that is hidden but submitted. I am a little confused over which field configuration param gets used as the name and which as the value. When I try this


items: [{
id: 'id_person',
fieldLabel: 'PersonID ref',
name: 'id_person_ref',
disabled: true
},{
id: 'id_person',
fieldLabel: 'PersonID',
name: 'id_person'
//hidden: true

I see only the second field displayed, but it has the correct value. I was assuming that the id was what got used when mapping the store value of that name to the field value, but it looks like I was wrong. Can some explain please?

TIA,
Nick.

Condor
11 Nov 2009, 3:53 AM
These fields should have the same name but different ids.

nickweavers
11 Nov 2009, 4:13 AM
Thanks @condor,

When I try your advice as follows:


items: [{
id: 'id_person_ref',
fieldLabel: 'PersonID ref',
name: 'id_person',
disabled: true
},{
id: 'id_person',
fieldLabel: 'PersonID',
name: 'id_person'
//hidden: true
},{

I find that the first field does not get initialised with its value, but the second one does. Please see the image attached.

Condor
11 Nov 2009, 5:50 AM
Yes, that is a problem with the BasicForm.setValues method.

How about a different solution:

new Ext.Viewport({
layout: 'form',
items: {
xtype: 'textfield',
fieldLabel: 'Label',
name: 'text',
value: 'Text',
readOnly: true,
listeners: {
render: function(c){
c.getEl().unselectable();
}
}
}
});

1. Works correctly on IE, Safari and Chrome.
2. Firefox only hides the text selection and still shows a cursor.
3. Opera still allows text selection.

nickweavers
11 Nov 2009, 10:15 AM
Thanks for the suggestion @condor. I settled for this workaround in the end.

Created the extra id_person_ref form field along with the original which is hidden:



items: [{
id: 'id_person_ref',
fieldLabel: 'PersonID',
name: 'id_person_ref',
disabled: true
},{
id: 'id_person',
fieldLabel: 'PersonID',
name: 'id_person'
//hidden: true
},{


Then added a row to the store to map the same source into the id_person_ref field...


var dataFields = [
{name: 'id_person', type: 'string', mapping: 'id_person'},
{name: 'id_person_ref', type: 'string', mapping: 'id_person'},

There is a larger spacing between the first and second field, but it sorts of serves to emphasis that the first field is different ie readonly (and now unselectable too :) )