1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    58
    Vote Rating
    0
    begineer2 is on a distinguished road

      0  

    Default GroupView with empty group

    GroupView with empty group


    Guys.. I'm kind of lost with how GroupView can be used.
    First in the API there is a field emptyGroupText to be displayed in case that a group is empty, but how can we run into this case?

    Well.. here is what I want to do:
    I have some categories: Cat 1, Cat 2, Cat 3 and subcategories: sub_1.1, sub_1.2

    Now, using GridPanel and GridView, am I able to display something like this? :

    Cat 1 (2 Items)
    --sub_1.1
    --sub_1.2
    Cat 2 (0 Items)
    Cat 3 (0 Items)

    From my tests, the GridPanel is not even rendering if the Category column is not rendered in the panel. Can it be done the grouping in another way (except a tree)?

    Here is the way that I've tried to do this.. obviously not ok:

    Code:
    var tstStore = new Ext.data.GroupingStore({
            fields: ['categoryName', 'subCategory', 'insertDate'],
            sortInfo:{field: 'insertDate', direction: "DESC"},
            groupField:'categoryName'
        });
        
    new Ext.grid.GridPanel({
        id                : 'testCategoryGrid',
        renderTo  : container,
            height    : 200,
            store          : tstStore,
            border    : false,
            enableColumnMove: false,
           disableSelection: true,
            columns            : [
                {header: 'Subcategory', width: 400, dataIndex: 'subCategory', menuDisabled: true},
                {header: 'Insert date', width: 80, dataIndex: 'insertDate', menuDisabled: true, sortable: true},
                {header: '', dataIndex: 'categoryName', hidden: true}
            ],
            viewConfig        : new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            })
        });

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, the grouping column must be included in the column model. As you found, you can hide it. Add hideable: false if you like so that the UI cannot show it using the menu.

    You need to specify a header so that it can build the group header correctly.

    So now what's the problem you're seeing?

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    58
    Vote Rating
    0
    begineer2 is on a distinguished road

      0  

    Default


    Hi,

    I was trying to have the group header containing only the category name (without the header value from the column model). I've seen that that is not working.. if is specified empty, then the semi-column char is still displayed. No big problem though, I can add something there.

    My last question on this topic is: can I have empty groups? Looking in my example, a category with 0 sub-categories?

    Well.. thinking twice, since the GridPanel works with a store and groups are built based on the records from the store, it means that 1 group will have a minimum of 1 element in the group. Then my answer is no.. is impossible to have 0 sub-categories

    If this is so, than consider my question answered . Otherwise, any suggestion on how can I display empty groups is very welcomed.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think it's perfectly valid to have no sub items in a group. Why not?

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    58
    Vote Rating
    0
    begineer2 is on a distinguished road

      0  

    Default


    Hi again. Thanks for the showGroupName property.. that is exactly what I need. I've missed it somehow when reading the API.. my bad.

    Regarding the empty groups.. I really don't get it.
    Lets take from the given example, the tstStore and consider that we have 2 records in the store:

    Rec1 = {
    "categoryName" : 'First category',
    "subCategory" : 'Sub first',
    "insertDate" :'whatever...'
    }

    Rec2 = {
    "categoryName" : 'First category',
    "subCategory" : 'Sub second',
    "insertDate" :'whatever 2'
    }

    This will generate 1 group with 2 items;
    My question is: what should I add in the store in order to have now a Second category with 0 sub-items?

    Because if I add:
    Rec3 = {
    "categoryName" : 'Second category'
    }

    this will generate a second group with 1 element which will be an empty line.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    No, I see.. DOH!

    Of course you can never have a category with zero items. It creates the category header from the items.

    You might be able to have a hidden Record. Put a special "placeholder" Record in of the correct category with some special values in it.

    Then implement getRowClass in your GridView to return 'x-hide-display' just for that special Record type.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, that works with a tweak.

    I have updated the examples/grid/grouping example to have an extra line of data:

    Code:
        ['Animal Software', -1, -1, -1, '1/1 12:00am', 'Animal']
    I'm using the fact that the price field is -1 to indicate that it's just a placeholder to create a category. The category "Animal".

    Then I use

    Code:
                groupTextTpl: '{text} <tpl if="values.rs[0].data.price != -1">({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})</tpl>',
                getRowClass: function(rec) {
                	if (rec.data.price == -1) return 'x-hide-display';
                }

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So here's my empty group:


  10. #10
    Ext User
    Join Date
    Oct 2008
    Posts
    58
    Vote Rating
    0
    begineer2 is on a distinguished road

      0  

    Thumbs up


    Awesome, thanks! This is exactly what I needed.

    Now it works perfect

    Thanks again