1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    15
    Vote Rating
    -1
    ornanong_o is an unknown quantity at this point

      0  

    Default Answered: How to group grid panel by custom renderer column?

    Answered: How to group grid panel by custom renderer column?


    How can I group grid panel by renderer column?

    I have column which its value is object and I render it in to HTML tag such <a>aa</a>.
    When I group by this field, it will group by [Object Object].

    group.png

    The ExtJS3 group column by renderer value but the ExtJS4 changes it to Object type. How can I group column by renderer value?

  2. Try to override the getGroupString function of your store. Add something like this:
    Code:
    getGroupString: function(instance) {
            return instance.get('....').property;
        }
    Something like that should work

  3. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    15
    Vote Rating
    -1
    ornanong_o is an unknown quantity at this point

      -1  

    Default


    Following picture is screen shot when group by Cuisine that is object value (not string):

    Grouped Grid Example - Mozilla Firefox_2011-09-20_11-22-52 -2.PNG

    Code:
    Ext.require(['Ext.data.*', 'Ext.grid.*']);
    Ext.onReady(function() {
        // wrapped in closure to prevent global vars.
        Ext.define('Restaurant', {
            extend: 'Ext.data.Model',
            fields: ['name', 'cuisine']
        });
        
        var aa ={
        id: '1',
        name: 'aa'
        };var bb ={
        id: '2',
        name: 'bb'
        };var cc ={
        id: '3',
        name: 'cc'
        };var dd ={
        id: '4',
        name: 'dd'
        };
    
        var Restaurants = Ext.create('Ext.data.Store', {
            storeId: 'restaraunts',
            model: 'Restaurant',
            sorters: ['cuisine','name'],
            groupField: 'cuisine',
            data: [{
                name: 'Cheesecake Factory',
                cuisine: [aa]
            },{
                name: 'University Cafe',
                cuisine: [bb]
            },{
                name: 'University Cafe',
                cuisine: [cc, dd]
            }]
        });
        
        var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
            groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            collapsible: true,
            iconCls: 'icon-grid',
            frame: true,
            store: Restaurants,
            width: 600,
            height: 400,
            title: 'Restaurants',
            features: [groupingFeature],
            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name'
            },{
                text: 'Cuisine',
                flex: 1,
                dataIndex: 'cuisine',
                renderer:function(value) {
                var renderedText = "";
                for(var i = 0; i< value.length; i++)
                {    
                    renderedText = renderedText + value[i].name + '<br/>';
                }             
                return renderedText;
                }
            }],
            fbar  : ['->', {
                text:'Clear Grouping',
                iconCls: 'icon-clear-group',
                handler : function(){
                    groupingFeature.disable();
                }
            }]
        });
    });


    But expected result should be displayed as following picture (Implement with ExtJs 3):
    Grid3 Grouping Example - Mozilla Firefox_2011-09-20_11-39-09.jpg


    Can anyone help me?

    Thank in advance.

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    54
    Answers
    2
    Vote Rating
    2
    HTK is on a distinguished road

      0  

    Default


    Try to override the getGroupString function of your store. Add something like this:
    Code:
    getGroupString: function(instance) {
            return instance.get('....').property;
        }
    Something like that should work

  5. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    15
    Vote Rating
    -1
    ornanong_o is an unknown quantity at this point

      0  

    Default


    Thank you for your help
    It's work.

  6. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Germany
    Posts
    54
    Answers
    2
    Vote Rating
    2
    HTK is on a distinguished road

      -1  

    Default


    Did it work because this thread is still unanswered!?

Thread Participants: 1