Results 1 to 9 of 9

Thread: Multi line grid header

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    London
    Posts
    14
    Vote Rating
    0
      0  

    Default Unanswered: Multi line grid header

    How can I have a multi line grid header with GXT 3.0? I saw a solution in ext js forums, and I overwrote "x-column-header-inner .x-column-header-text" in my own css file.But it did not work.

    .x-column-header-inner .x-column-header-text {
    white-space: normal;
    display: table-cell;
    vertical-align: middle;
    }
    .x-column-header-inner {
    line-height: normal;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    display: table-cell;
    vertical-align: middle;
    }

    Is there a way to do it?

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    413
    Answers
    20
    Vote Rating
    21
      0  

    Default

    Take a look at the Aggregation Grid example here: http://sencha.com/examples-dev/#Exam...ggregationgrid.

    Specifically, you'll need to add a header group to your column model object.

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Does anyone know if column groups can span other groups? For example, in the AggregationGrid example above, where there are two groups, "Stock Information" and "Stock Performance", is there a way to get a group above those two? And if so, is there a limit to the hierarchy depth that can be built?

  4. #4
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    413
    Answers
    20
    Vote Rating
    21
      0  

    Default

    A quick glance at the API indicates that it does not appear to support this directly, however you may be able to accomplish something via a custom ColumnHeaderAppearance ColumnHeader object.

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Thanks for the quick reply. I had the same thought of the current API's limitations. Looking over the ColumnHeader.ColumnHeaderAppearance api, would a potential solution to this problem involve writing custom HTML? In that case, how would I maintain the same look and feel?

    I suspect I could never get this to work right coding it from the public API. I can't see how I'd handle things like column width resizing. But from the lower-level internals, it might not be that hard (read, very useful GXT enhancement request )

    Any thoughts?

  6. #6
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    413
    Answers
    20
    Vote Rating
    21
      0  

    Default

    Yes, I believe it would involve writing custom HTML. Regarding L&F, as long as you work within the confines of BaseColumnHeaderAppearance, the skinning portion may "just work" but I can't say that with any degree of confidence as I don't have any clue as to what their skinning CSS looks like and whether it's DOM structure dependent in a non-generic way.

    At this point, since you're not a premium support subscriber, an answer to your question may be hit or miss if you ask it in a new thread (which you probably should have done so it gets full attention - hijacking existing threads is considered taboo and a no-no) but Sencha is trying to be good about answering them, you might try joining #extgwt on Freenode and asking your question there. One of the Sencha GXT devs hangs out there a lot and he may be able to give you a quick answer in either way (yes or no).

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737
    Answers
    109
    Vote Rating
    93
      1  

    Default

    Column groups can indeed span other groups - working from the source at http://www.sencha.com/examples/#Exam...ggregationgrid I added the following bolded code (other lines added for context):
    Code:
          ColumnModel<Stock> cm = new ColumnModel<Stock>(configs);
    
          cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Stock", 1, 4));
          cm.addHeaderGroup(1, 0, new HeaderGroupConfig("Stock Information", 1, 2));
          cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));
    
          AggregationRowConfig<Stock> averages = new AggregationRowConfig<Stock>();
    This resulted in the following UI:
    screenshot12.png

    The details of the row/column to insert this header are important, as are the rowspan/colspan to be set on the HeaderGroupConfig itself.

  8. #8
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    413
    Answers
    20
    Vote Rating
    21
      1  

    Default

    It was just indirectly pointed out to me the following:

    ColumnConfig's method to apply a group header is addHeaderGroup, not setHeaderGroup and looking at the code, the underlying construct maintains a collection of HeaderGroupConfigs so you may want to start there.

Posting Permissions

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