A Grid widget.
Common Problems: - Grid does not resize properly when going smaller: Setting overflow hidden on the container element will correct this
- If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element dimensions. The grid adapts to your container's size, if your container has no size defined then the results are unpredictable.
- Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the grid to calculate dimensions/offsets.
CSS can be used to style or customize the behaviour of headers an cells.
For example, use this to wrap all cell contents globally
.x-grid3-cell-inner { overflow: visible; white-space: normal !important; }
To wrap cell contents on a certain table only, set an ID to the Grid panel (say company-grid) and then use the CSS
#company-grid .x-grid3-cell-inner { overflow: visible; white-space: normal !important; }
To wrap long header titles For all grids
.x-grid3-hd-inner { overflow: visible; white-space: normal; }
For specific grid
#company-grid .x-grid3-hd-inner { overflow: visible; white-space: normal; }
For specific column
.x-grid3-hd-company { overflow: visible; white-space: normal !important; }
@author Sanjiv Jivan