1. #281
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
    leolox69 is on a distinguished road

      0  

    Default


    I used the basic gridpanel in this. Not the Ext.ux.grid.MultiGroupingGrid

    Code:
                    var rowDataDef = Ext.data.Record.create([
                        {name: 'country', type: 'string'},
                        {name: 'customer', type: 'string'},
                        {name: 'progproj', type: 'string'},
                        {name: 'activity', type: 'string'},
                        {name: 'activity_count'},
                        {name: 'frequency'},
                        {name: 'date'},
                        {name: 'qty'},
                        {name: 'price'},
                        {name: 'amt'},
                        {name: 'encoded_by'},
                        {name: 'date_encoded'},
                        {name: 'modified_by'},
                        {name: 'date_modified'}
                    ]);
                    
                   var reader = new Ext.data.JsonReader(
                        {
                            totalProperty: 'totalCount',
                            root: 'data'
                        },
                        rowDataDef
                    );
                    
                    var conn = new Ext.data.Connection({
                        timeout : 3600000,
                        url: "<?php echo url_for('reports/GetRevenueAudit') ?>",
                        method : 'POST'
                    });
                    
                    var mainStore = new Ext.ux.grid.MultiGroupingStore({
                        proxy : new Ext.data.HttpProxy(conn),
                        reader: reader,
                        sortInfo: {field: 'customer', direction: 'ASC'},
                        groupField: ['country', 'customer', 'progproj', 'activity']
                    });
                    
                    var mainView = new Ext.ux.grid.MultiGroupingView({
                        hideGroupedColumn: false,
                        displayEmptyFields: true,
                        startCollapsed: true,
                        emptyGroupText: ' ',
                        getRowClass: function(rec, rowIndex, meta, store){
                            if( rec.data.date.charAt(0) == '<' )
                                return 'total';
                        },
                        groupTextTpl: '{[values.groupName != "progproj" ? [values.groupName != "activity" ? [values.group] : [values.group] + " [ " + [values.rs[0].data["frequency"] + " ] "]] : [values.group] + " ( " + [values.rs[0].data["activity_count"] == 1 ? values.rs[0].data["activity_count"] + " Billing Activity" : values.rs[0].data["activity_count"] + " Billing Activities"] + " )"]}'
                    });
                    
                    var mainGrid = new Ext.grid.GridPanel({
                        id: 'mainGrid',
                        store: mainStore,
                        view: mainView,
                        stripeRows: true,
                        stateful: true,
                        loadMask: true,
                        enableColumnMove: false,
                        height: 500,
                        style: 'margin-left: 10px;',
                        sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                        columns:[
                            {header: "Country", dataIndex: 'country', width: 100, align: 'left', hidden: true},
                            {header: "Customer", dataIndex: 'customer', width: 200, align: 'left', hidden: true},
                            {header: "Program/Project", dataIndex: 'progproj', width: 200,  align: 'left', hidden: true},
                            {header: "Activity", dataIndex: 'activity', width: 150, align: 'left', hidden: true},
                            {header: "Date", dataIndex: 'date', width: 75, align: 'center'},
                            {header: "Qty", dataIndex: 'qty', width: 100, align: 'right'},
                            {header: "Price", dataIndex: 'price', width: 100, align: 'right'},
                            {header: "Amount", dataIndex: 'amt', width: 100, align: 'right'},
                            {header: "Encoded By", dataIndex: 'encoded_by', width: 130, align: 'left'},
                            {header: "Date Encoded", dataIndex: 'date_encoded', width: 130, align: 'center'},
                            {header: "Modified By", dataIndex: 'modified_by', width: 130, align: 'left'},
                            {header: "Date Modified", dataIndex: 'date_modified', width: 130, align: 'center'}
                        ],
                        tbar: [
                            {
                                xtype: 'label',
                                html: '<div style="height: 20px;"></div>',
                                id: 'infoLabel'
                            }
                        ]
                    });

  2. #282
    Sencha User justusvm's Avatar
    Join Date
    May 2010
    Location
    Chennai, TN
    Posts
    10
    Vote Rating
    0
    justusvm is on a distinguished road

      0  

    Default


    Hi leolox69
    Please give me the code for multigroupingstore and multigroupingview

  3. #283
    Sencha User justusvm's Avatar
    Join Date
    May 2010
    Location
    Chennai, TN
    Posts
    10
    Vote Rating
    0
    justusvm is on a distinguished road

      0  

    Default


    Hi leolox69,
    The above code is work fine in ExtJS 4..?

  4. #284
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
    leolox69 is on a distinguished road

      0  

    Default


    Quote Originally Posted by justusvm View Post
    Hi leolox69
    Please give me the code for multigroupingstore and multigroupingview
    It's already right there. Just take a look again,

  5. #285
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
    leolox69 is on a distinguished road

      0  

    Default


    Quote Originally Posted by justusvm View Post
    Hi leolox69,
    The above code is work fine in ExtJS 4..?
    I don't know. I haven't tried it on ExtJS 4. How I wish to try it on 4. Anyways, it'll work with a few changes and don't forget to include your plugins

  6. #286
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    26
    Vote Rating
    2
    roman.savko is on a distinguished road

      0  

    Default


    Hi leolox69,
    Can you adapt this awesome plugin for ExtJS 4?
    It's a killing feature, which a lot of people need. Please....

  7. #287
    Sencha User
    Join Date
    Jun 2011
    Posts
    6
    Vote Rating
    0
    fvchapa is on a distinguished road

      0  

    Default


    Buenos dias...soy principiante en estoy y no logro hacer funcionar este grid. me podrian dar unos paso a seguir. Estoy usando extj.3.3.1. saludos

  8. #288
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    pardhu is on a distinguished road

      0  

    Default


    hi,
    i am new to extjs .presently i am working grids. in grids i want display multi Grouping in a grids .

    so plz sent me any simple and basic example.

  9. #289
    Sencha User
    Join Date
    Jan 2012
    Posts
    41
    Vote Rating
    2
    Golden.Vulture is on a distinguished road

      0  

    Exclamation Killing feature

    Killing feature


    Can somebody please update it for EXTJS 4 ?? It will be of lot of help seriously !!!!!!
    Really need this guys !

  10. #290
    Sencha User
    Join Date
    Sep 2008
    Posts
    3
    Vote Rating
    5
    miha is on a distinguished road

      3  

    Default Multi grouping for ExtJS 4.

    Multi grouping for ExtJS 4.


    Hi, everyone!

    I have been trying to make Multi-Grouping functionality for extjs 4, based on "groupers" property in Ext.data.Store. And this is the first result. It is very draft. but it works.
    I have overload three functions: getGroups in Ext.data.Store and getGroupRows, getFeatureTpl in Ext.grid.feature.Grouping
    Hope it would be useful for someone. And you can be free with your comments and correction, etc.

    Code:
    Ext.define('Ext.data.StoreEx', {
        extend: 'Ext.data.Store',
        
        getGroups: function(requestGroupString) {
            var me = this;
            var records = this.data.items,
                length = records.length,
                groups = [],
                pointers = {},
                record,
                groupStr,
                group,
                i;
            
            var len = 0;
            var fields = [];
            
            
            this.groupers.each(function(item){
                fields.push(item.property);
                len++;
            });
            
            var arr_val = new Array(len);
            
            var val, iter, new_per, grp_td;
            iter = groups;
            for (i = 0; i < length; i++) {
            
                record = records[i];            
                
                new_per = false;
                grp_td = "";
                for(var j=0; j<len; j++){
                    val = record.get(fields[j]);
                    if (val != arr_val[j] || new_per){
                        
                        iter.push({
                            name: val,
                            children: [],
                            last_grp: (j==len-1), // uses getGroupRows
                            grp_spn: me.col_len - j, // uses in getFeatureTpl. Suppose better approach can be found out
                            grp_td: grp_td // uses in getFeatureTpl. Suppose better approach can be found out
                        });
                        arr_val[j] = val;
                        new_per = true;
                        iter = iter[iter.length-1].children;
                    }
                    else {
                        iter = iter[iter.length-1].children;    
                    }
                    grp_td = grp_td + "<td></td>";
                }
                iter.push(record);    
    
                iter = groups;            
            }
    
            return groups;
        }
    });
    
    Ext.define('Ext.grid.feature.GroupingEx', {
        extend: 'Ext.grid.feature.Grouping',
        alias: 'feature.groupingex',
        
        getGroupRows: function(group, records, preppedRecords, fullWidth) {
            var me = this,
                children = group.children,
                rows = group.rows = [],
                view = me.view;
            group.viewId = view.id;
    
            if (group.last_grp){
                Ext.Array.each(records, function(record, idx) {
                    if (Ext.Array.indexOf(children, record) != -1) {
                        rows.push(Ext.apply(preppedRecords[idx], {
                            depth: 1
                        }));
                    }
                });
            }
            else {
                Ext.Array.each(children, function(chl, idx) {
                    rows.push(me.getGroupRows(chl, records, preppedRecords, fullWidth));
                });
            }
            
            
            delete group.children;
            
            
            group.fullWidth = fullWidth;
            if (me.collapsedState[view.id + '-gp-' + group.name]) {
                group.collapsedCls = me.collapsedCls;
                group.hdCollapsedCls = me.hdCollapsedCls;
            }
    
            return group;
        }
        ,getFeatureTpl: function(values, parent, x, xcount) {
            var me = this;
            
            return [
                '<tpl if="typeof rows !== \'undefined\'">',
                    
                    '<tr class="' + Ext.baseCSSPrefix + 'grid-group-hd ' + (me.startCollapsed ? me.hdCollapsedCls : '') + ' {hdCollapsedCls}">{grp_td}<td class="' + Ext.baseCSSPrefix + 'grid-cell" colspan="{grp_spn}" {[this.indentByDepth(values)]}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner"><div class="' + Ext.baseCSSPrefix + 'grid-group-title">{collapsed}' + me.groupHeaderTpl + '</div></div></td></tr>',
                    
                    '<tr id="{viewId}-gp-{name}" class="' + Ext.baseCSSPrefix + 'grid-group-body ' + (me.startCollapsed ? me.collapsedCls : '') + ' {collapsedCls}"><td colspan="' + parent.columns.length + '">{[this.recurse(values)]}</td></tr>',
                '</tpl>'
            ].join('');
        }
        
    });
     Ext.onReady(function(){
        
        var groupers = [{
                property : 'name',
                direction: 'ASC'
            },{
                property : 'email',
                direction: 'ASC'
            }];
        
        Ext.create('Ext.data.StoreEx', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            //groupField: 'name',
            groupers : groupers,
            col_len: 3,
            data:[
                { 'name': 'name1', "email":"em_1_1", "phone":"555-111-1224" },
                { 'name': 'name1', "email":"em_1_1", "phone":"555-111-1224" },
                { 'name': 'name1', "email":"em_1_2", "phone":"555-111-1224" },
                { 'name': 'name2', "email":"em_2_1", "phone":"555-222-1234" },
                { 'name': 'name2', "email":"em_2_1", "phone":"555-222-1234" },
                { 'name': 'name2', "email":"em_2_2", "phone":"555-222-1244" },
                { 'name': 'name2', "email":"em_2_2", "phone":"555-222-1254" }
            ],
        });
        
        var groupingFeature = Ext.create('Ext.grid.feature.GroupingEx', {
            //groupHeaderTpl: 'Group: {last_grp} {name} ({rows.length})'//, //print the number of items in the group
            //startCollapsed: true // start all groups collapsed
        });
    
    
        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                { header: 'Name',  dataIndex: 'name' },
                { header: 'Email', dataIndex: 'email', flex: 1 },
                { header: 'Phone', dataIndex: 'phone' }
            ],
            height: 400,
            width: 600,
            features: [groupingFeature],
            renderTo: Ext.getBody()
        });
        
    });

Thread Participants: 117

  1. galdaka (34 Posts)
  2. karimchebani (1 Post)
  3. mdissel (2 Posts)
  4. mystix (3 Posts)
  5. wayne_o (8 Posts)
  6. akannu (1 Post)
  7. tchitani (8 Posts)
  8. timmy (1 Post)
  9. dhenning23 (1 Post)
  10. DServe (1 Post)
  11. tdikarim (4 Posts)
  12. Nam (1 Post)
  13. ljkmchale (8 Posts)
  14. StaticVoidMain (2 Posts)
  15. sawan (1 Post)
  16. vicirst (1 Post)
  17. jaquet (1 Post)
  18. jerrybrown5 (4 Posts)
  19. ut_paule (10 Posts)
  20. nnextjs (1 Post)
  21. sergeiw (1 Post)
  22. st_gross (1 Post)
  23. emily (5 Posts)
  24. ENEMYoftheSUN (1 Post)
  25. smarttdv (1 Post)
  26. JDevloper (1 Post)
  27. Maharshi (2 Posts)
  28. pbuyle (2 Posts)
  29. cujo13 (2 Posts)
  30. johnstontrav (1 Post)
  31. Jack_S (8 Posts)
  32. DamienValentine (7 Posts)
  33. source78 (1 Post)
  34. cgs1999 (1 Post)
  35. Karmaresh (5 Posts)
  36. praveen.infra (2 Posts)
  37. pops (1 Post)
  38. mcouillard (2 Posts)
  39. maquejp (2 Posts)
  40. bvutukur (3 Posts)
  41. sim (2 Posts)
  42. tBSTAR (4 Posts)
  43. randymay (5 Posts)
  44. Rothariger (1 Post)
  45. shankys_4u (3 Posts)
  46. hpandey (1 Post)
  47. miha (3 Posts)
  48. wp.joju (4 Posts)
  49. oliverseitz (1 Post)
  50. tklever (1 Post)
  51. codingvista (3 Posts)
  52. iamdman (2 Posts)
  53. rene.klatt (1 Post)
  54. yrobla (1 Post)
  55. dmichael (1 Post)
  56. Helton Gon (1 Post)
  57. giovanni (2 Posts)
  58. nacha (1 Post)
  59. Tewr (2 Posts)
  60. snowy8781 (1 Post)
  61. rpnoble (1 Post)
  62. denyall (2 Posts)
  63. vladcd (3 Posts)
  64. rickonodera (1 Post)
  65. yyogev (21 Posts)
  66. daltonjorge (6 Posts)
  67. janasri (1 Post)
  68. dbojdo (1 Post)
  69. Azadi (1 Post)
  70. isit.gd (4 Posts)
  71. blackghost (3 Posts)
  72. dileep singhal (8 Posts)
  73. mrbeig9 (2 Posts)
  74. rupidas (1 Post)
  75. xiaofei (1 Post)
  76. extjsnewb (3 Posts)
  77. nestore2k (1 Post)
  78. TonyBones (2 Posts)
  79. Haron (1 Post)
  80. thorben (1 Post)
  81. amsoft (1 Post)
  82. paivajose (1 Post)
  83. Karthikeyan.rajmohan (1 Post)
  84. alexpotemkin (1 Post)
  85. cristinadelosa (1 Post)
  86. justusvm (4 Posts)
  87. Kunha (1 Post)
  88. rogerio.carrasqueira (1 Post)
  89. krishnaswamy (2 Posts)
  90. jdamani (1 Post)
  91. chavocarlos (2 Posts)
  92. raghuramgreddy (1 Post)
  93. garrythebest (1 Post)
  94. Komal Vaswani (1 Post)
  95. Hari1611 (3 Posts)
  96. sri_dev (1 Post)
  97. Ferny (1 Post)
  98. mosull2 (1 Post)
  99. Manjula (1 Post)
  100. roman.savko (2 Posts)
  101. grace.lawrence (3 Posts)
  102. leolox69 (5 Posts)
  103. fvchapa (1 Post)
  104. ilmcon (1 Post)
  105. pardhu (1 Post)
  106. psianil9 (1 Post)
  107. Golden.Vulture (1 Post)
  108. tempvalue (1 Post)
  109. Venkatram64 (2 Posts)
  110. Vishnu C (1 Post)
  111. shrujan07 (2 Posts)
  112. raffyaslanbeily (1 Post)
  113. srautpyaa (1 Post)
  114. ocr (1 Post)
  115. henriquebotega (1 Post)
  116. rajkumargvrs (2 Posts)
  117. nobruds (1 Post)