Results 1 to 7 of 7

Thread: Grid styling to make small grid

  1. #1
    Sencha Premium User
    Join Date
    Sep 2016
    Posts
    13

    Default Grid styling to make small grid

    Hi there,

    I have a simple grid of 9 rows and 13 columns, each cell of which contains a single period. With the default UI, this grid takes up a lot of space in my application. However, I can't quite seem to figure out how to shrink it down. I'd expect there to be something like $font-size in grid-ui but it's not there.

    Can anyone give me any pointers (or preferably point to an example) of styling a single grid so that it takes up less space in the application? I have found item-font-size in the dataview-ui and row and column ui's, but I'm not sure how to put them all together.

    It seems like it should be a simple matter to "shrink" a grid from its default size, but when I allocate a smaller width/height the application wants to keep the grid cells the same size and scroll rather than shrink the font/padding, etc.

    Any suggestions?






    FWIW, my grid is dynamically created from an json/ajax query returning columns, fields, and records:
    Code:
    var json = {"count": 8, "success": true, "title": "emptyPlate",
    
     "records": [{"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "A"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "B"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "C"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "D"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "E"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "F"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "G"}, {"col12": ".", "col8": ".", "col9": ".", "col6": ".", "col7": ".", "col4": ".", "col5": ".", "col2": ".", "col3": ".", "col1": ".", "col10": ".", "col11": ".", "letter": "H"}], 
    
    "message": null,
    
     "columns": [{"text": "1", "type": "string", "dataIndex": "col1", "flex": 1}, {"text": "2", "type": "string", "dataIndex": "col2", "flex": 1}, {"text": "3", "type": "string", "dataIndex": "col3", "flex": 1}, {"text": "4", "type": "string", "dataIndex": "col4", "flex": 1}, {"text": "5", "type": "string", "dataIndex": "col5", "flex": 1}, {"text": "6", "type": "string", "dataIndex": "col6", "flex": 1}, {"text": "7", "type": "string", "dataIndex": "col7", "flex": 1}, {"text": "8", "type": "string", "dataIndex": "col8", "flex": 1}, {"text": "9", "type": "string", "dataIndex": "col9", "flex": 1}, {"text": "10", "type": "string", "dataIndex": "col10", "flex": 1}, {"text": "11", "type": "string", "dataIndex": "col11", "flex": 1}, {"text": "12", "type": "string", "dataIndex": "col12", "flex": 1}],
    
     "metadata": {
      "fields": [{"text": "1", "type": "string", "dataIndex": "col1", "flex": 1}, {"text": "2", "type": "string", "dataIndex": "col2", "flex": 1}, {"text": "3", "type": "string", "dataIndex": "col3", "flex": 1}, {"text": "4", "type": "string", "dataIndex": "col4", "flex": 1}, {"text": "5", "type": "string", "dataIndex": "col5", "flex": 1}, {"text": "6", "type": "string", "dataIndex": "col6", "flex": 1}, {"text": "7", "type": "string", "dataIndex": "col7", "flex": 1}, {"text": "8", "type": "string", "dataIndex": "col8", "flex": 1}, {"text": "9", "type": "string", "dataIndex": "col9", "flex": 1}, {"text": "10", "type": "string", "dataIndex": "col10", "flex": 1}, {"text": "11", "type": "string", "dataIndex": "col11", "flex": 1}, {"text": "12", "type": "string", "dataIndex": "col12", "flex": 1}
    
    ]}}
    Those values are used to dynamically populate model and store of the grid:
    Code:
      var grid = this.down('#plate-selector-inner-grid');
            grid.setColumns(json.columns);
            var gridstore = grid.getStore();
            grid.setStore({
                fields: json.metadata.fields,
                data: json.records,
            });

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Hi there- Unfortunately I do not have the answer for you but I have asked that a member of the support team reach out to you and provide some assistance. Thank you so much for your patience.

    Michele


  3. #3
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    71
    Answers
    3

    Default

    If you want to go the route of overriding the default styling here is what I use in every one of my applications. My applications are geared towards business users who expect the grid panel to look more like a spreadsheet. Even if these overrides don't work exactly for you they should give you an idea of how you can shrink down the cell sizes. If you are not using cell editors then probably the first two style classes below are all you need.

    /* Reduces the default padding inside the grid column headers so that more data can be shown on the screen */
    .x-column-header-inner {
    padding:2px 6px 2px 6px !important;
    }
    /* Reduces the default padding inside the grid cells so that more data can be shown on the screen */
    .x-grid-cell-inner {
    padding:2px 4px 2px 6px !important;
    }
    /* Overrides the default min height of a form text field so that it doesn't overflow the grid cell boundaries.
    when the cell is being edited. Works in conjunction with the style class above that reduces padding.*/
    .x-grid-cell-editor .x-form-text-default {
    min-height:0 !important;
    }
    /* Overrides the trigger icon font height so that it doesn't cause the combo box to overflow the cell. Works in
    conjunction with the style class above that reduces padding.*/
    .x-grid-cell-editor .x-form-trigger-default {
    font: 16px/25px FontAwesome !important;
    }
    /* Removes the top border of the grid column headings: */
    .x-grid-header-ct {
    border-top-width:0 !important;
    border-color:#ccc !important;
    }
    /* Removes the 2px border between the column headings and the grid body: */
    .x-grid-body {
    border-width:1px !important;
    border-color:#ccc !important;
    }

  4. #4
    Sencha Premium User
    Join Date
    Sep 2016
    Posts
    13

    Default

    Quote Originally Posted by gsoc2014 View Post
    If you want to go the route of overriding the default styling here is what I use in every one of my applications. My applications are geared towards business users who expect the grid panel to look more like a spreadsheet. Even if these overrides don't work exactly for you they should give you an idea of how you can shrink down the cell sizes. If you are not using cell editors then probably the first two style classes below are all you need.

    /* Reduces the default padding inside the grid column headers so that more data can be shown on the screen */
    .x-column-header-inner {
    padding:2px 6px 2px 6px !important;
    }
    /* Reduces the default padding inside the grid cells so that more data can be shown on the screen */
    .x-grid-cell-inner {
    padding:2px 4px 2px 6px !important;
    }

    }

    Thanks. How would I get this to apply to just one grid in an application? Also, I need to reduce the font size used by this one grid. How would I do that?

    -Jon

  5. #5
    Sencha Premium User
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    71
    Answers
    17

    Default

    Create a custom grid ui and then set it on your grid component.

  6. #6
    Sencha Premium User
    Join Date
    Sep 2016
    Posts
    13

    Default

    I'm afraid I'm still not getting it. The grid-ui doesn't have any font or color options, although the dataview-ui does.

    I've tried to use a dataview-ui:

    Code:
    @include dataview-ui(                                                                                                                                                                                                                 
        $ui: 'sample-grid',                                                                                                                                                                                                               
        $background-color: red,                                                                                                                                                                                                           
        $item-color: green,                                                                                                                                                                                                               
        $item-font-size: 6,                                                                                                                                                                                                               
        $item-padding: 0   
    );
    I can tell the UI itself is being applied to my grid because I get the eye-searingly ugly color scheme, but the item-font-size is not respected. Can you perhaps provide a fiddle demonstrating the use of a ui to set a small font size on a grid using extjs modern?

  7. #7
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    538
    Answers
    7

    Default

    Hello,

    In the docs in https://docs.sencha.com/extjs/6.6.0/...mn.Column.html its written


    "The columns are laid out by a Ext.layout.container.HBox layout, so a column can either be given an explicit width value or a flex configuration. If no width is specified the grid will automatically the size the column to 100px."


    If you want to reduce the cell size, you can give width to column as otherwise every cell will have width of 100px. Please refer to the below fiddle
    https://fiddle.sencha.com/#fiddle/1n7s&view/editor

Similar Threads

  1. Replies: 1
    Last Post: 5 Aug 2016, 8:04 AM
  2. [NOREPRO] Small styling issue with form fields in Firefox
    By bob4ever in forum Ext 5: Bugs
    Replies: 2
    Last Post: 15 Jun 2014, 11:43 PM
  3. How do I make text right below small canvas?
    By Ethan Long in forum Sencha Touch 2.x: Q&A
    Replies: 4
    Last Post: 25 Mar 2012, 9:57 PM
  4. I cant seem to make buttons style small.
    By landed in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 5 Mar 2012, 10:36 AM
  5. Replies: 3
    Last Post: 18 Jan 2012, 6:55 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
  •