PDA

View Full Version : Text field look like normal text until in edit mode



WinningJr
16 Sep 2013, 12:16 PM
I'm not sure if this is a stupid idea or not. I think I want the fields on my form to look like normal html text until the update button is pressed. They would then look like normal text field objects. Setting them to disable and readonly makes them still look like hard to read text fields.

Is there a way to be rid of the box and image in EXTJS, or do I have to style them manually?

Thanks.

WinningJr
16 Sep 2013, 3:54 PM
I can get rid of the box and image with:
txtFirstName.setFieldStyle({'border':'none'});
txtFirstName.setFieldStyle({'background-image':'none'});

Adding it back is not as easy as I can't seem to get the image back:
txtFirstName.setFieldStyle({"border":"solid 1px #b5b8c8"});
txtFirstName.setFieldStyle({'background-image':'/extjs/resources/ext-theme-classic/images/form/text-bg.gif'});
txtFirstName.setFieldStyle({'background-repeat':'repeat-x'});

Anyone know off hand what is wrong?

ettavolt
17 Sep 2013, 8:47 AM
Take a look on Property Grid (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.property.Grid).

WinningJr
17 Sep 2013, 9:10 AM
I'm not sure what to look for on the propery grid. There is no attribute labeld "backgroupd-image" or "image". I believe it came from the style sheet (where I found the image '/extjs/resources/ext-theme-classic/images/form/text-bg.gif'). Using setFieldStyle does not appear to work for the image though......

ettavolt
18 Sep 2013, 12:07 AM
I mean that PropertyGrid looks like a plain text and shows fields only when user clicks to edit the value.
This maybe a different approach then changing styles for ordinary fields.