Skip to main content

Ext JS 4: How to wrap text in grid headers or cells

Ext JS 4: How to wrap text in grid headers or cells

Here's a CSS hack for ExtJS 4 to wrap the text in grid columns for all grids in the application:
.x-column-header-inner .x-column-header-text {
    white-space: normal;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}
And here's the trick to make it work for a single grid. You should configure your grid with an id:
{
    xtype   : 'grid',
    id      : 'somegrid',
    ...
}
And add this id to the CSS path:
#somegrid .x-column-header-inner .x-column-header-text {
    white-space: normal;
}

#somegrid .x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}
Here's a hack to wrap text in grid cells:
.x-grid-cell-inner {
    white-space: normal
}
And that's the same hack for a single grid:
#somegrid .x-grid-cell-inner {
    white-space: normal
}

Comments

  1. dawnknightOctober 30, 2021 at 1:12 PM

    No doubt about it, changing the facebook font generator and font-size on your blog can make the world of difference to how it looks and your reader experience / response. One of the challenges that I have encountered when creating sites for clients is that they like to use 'fancy' fonts to enhance the look. Unfortunately, these fonts don't always translate to a 'web friendly' website, which can be viewed as it is intended by the site owner.

    ReplyDelete
  2. nordniOgranyaApril 23, 2022 at 11:33 AM

    nordniOgranya Mike Allen https://wakelet.com/wake/vJyi-fz7iBqk1Xquhm-KU
    tsonjalassco

    ReplyDelete
  3. coniad-i2000May 20, 2022 at 2:24 AM

    coniad-i2000 Anthony Salvarezza https://www.strangeaeongames.com/profile/Suzuki-Df225-Service-Manual-Free-Download-UPD/profile
    bandomawa

    ReplyDelete

Post a Comment

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more