Results 1 to 8 of 8

Thread: Increase the overall font size of a datagrid in ext-js

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    11

    Default Increase the overall font size of a datagrid in ext-js

    How do you increase the font size and row height of a datagrid in ext-js?

    I have been only able to change a column through a renderer - but there must be a simpler way to increase the size of all of the text in the grid along with a taller row height.

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257

    Default

    Just use css rules to modify it appropriately. Poke around with firebug to find out what stuff you need to change.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    x-grid3-cell-inner
    Wes

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Posts
    11

    Default

    Should I be modifying the ext-all.css file? Isn't that bad?

  5. #5

    Default

    Sounds pretty naughty to me. The reason it's bad is because it's hard to remember the mods when you upgrade. But you can declare your own style.

    HTML Code:
    #my-grid .x-grid3-cell-inner {
      font-size: 16px;
      color: red;
      background-color: green;
    }
    And use the grid's id in your custom css definition. This allows you to do:

    Code:
    myGrid = new Ext.grid.GridPanel({
      id: 'my-grid',
      ...
    });
    For the win?
    Wes

  6. #6
    Sencha User
    Join Date
    Jun 2010
    Posts
    11

    Default

    Great - thank you - that works.

    What is the css parameter to adjust the row height to match the increased the larger font size?

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    11

    Default

    I looked at this topic:

    http://gwt-ext.com/forum/viewtopic.php?f=9&t=1683

    There should be a difference between wrapping and setting a row height - correct?

  8. #8

    Default

    HTML Code:
    .x-wes {
    	height: 18px;
    }
    Code:
    viewConfig: {
    	getRowClass: function() {
    		return 'x-wes';
    	}
    },
    This isn't a good solution unless you've used the first solution I've posted, since the heights are being declared twice, you can end up with a cell-inner class's height/width/size being bigger than the size specified in 'x-wes' or equiv class.

    IE, Don't make the row smaller than the cells in it or it is gonna look terrible. Of course, if you did it then the onus is on you to make sure you keep these synched.
    Wes

Similar Threads

  1. HtmlEditor and increase/decrease font size
    By jtuchscherer in forum Community Discussion
    Replies: 6
    Last Post: 5 Oct 2010, 9:18 AM
  2. A+ and A- i.e., Font Increase or Decrease functionality provided on ExtJS DataGrid
    By sharadtitan2006 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 11 Sep 2010, 1:42 AM
  3. Ext.TabPanel - increase tab size
    By diablo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jan 2010, 2:01 AM
  4. Replies: 2
    Last Post: 26 Oct 2007, 12:58 PM
  5. how to increase grid row height and font size
    By fangzhouxing in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 11 Jul 2007, 5:44 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •