View Full Version : [CLOSED][3.0.0] css missing?

20 Jul 2009, 8:13 AM
If I create a grid with isFormField=true, it is unstyled.

I think it should look like a textarea. There's no CSS for 'x-form-field x-grid-anything', maybe there should be? And for other components that might be used in forms, too.

Attached is an image of a grid above a textarea. The textarea has a nice border around it, the grid is just a blank white rectangle. The grid has hideHeaders=true...

20 Jul 2009, 8:19 AM
Additionally, border: true and bodyBorder: true do nothing. However, if a tbar is added, the tbar gets border but not the grid space below.

20 Jul 2009, 8:25 AM
I've modified the array grid example per your description above and the grid appears as expected.

Please see this thread for the recommended format for a bug report:

20 Jul 2009, 8:43 AM
You didn't put it in a form ;-)

20 Jul 2009, 8:46 AM
You didn't put it in a form ;-)

it really would help if you posted a drop-in test case.
i imagine the time @evan spends writing test cases for the dozen or so bug reports you and i have both seen that end with a "oh crap! it's my fault! my bad... :">" could be better spent towards fixing actual bugs ;)

20 Jul 2009, 8:57 AM
This isn't a code bug.

You can just look at ext-all.css and see there are no styles for grids used as form fields.

So I asked a more general question about that and illustrated it with an image.

I wouldn't call this a bug but an oversight/omission.

Hence the title: 'CSS missing?" vs. "bug, there is no CSS for..."

I can style the grid myself with custom CSS, but that means I have to hack ext-all.css, and every .css file for every skin I'd want to use with the application. Hence I think it would benefit not only me but everyone else who ever uses isFormField=true to have the styling done proper.


20 Jul 2009, 9:16 AM
If you intend to aggregate a grid as a form field you should create a custom subclass which extends from Ext.form.Field. This is not a standard feature of Ext.

20 Jul 2009, 9:35 AM
Every class that inherits component has this in the documentation:

clearCls (http://ext.bytor.pint.com/docs/source/Component.html#cfg-Ext.Component-clearCls) : StringThe CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide...
The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide field clearing (defaults to 'x-form-clear-left').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout (http://ext.bytor.pint.com/docs/output/Ext.layout.FormLayout.html) layout manager (e.g. Ext.form.FormPanel (http://ext.bytor.pint.com/docs/output/Ext.form.FormPanel.html) or specifying layout:'form') and either a fieldLabel (http://ext.bytor.pint.com/docs/output/Ext.Component.html#Ext.Component-fieldLabel) is specified or isFormField=true is specified.

20 Jul 2009, 11:24 AM
Yup, it will generate those CSS classes for you to use.