Page 29 of 32 FirstFirst ... 192728293031 ... LastLast
Results 281 to 290 of 313

Thread: Multiple level of grouping in grids

  1. #281
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
      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
      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
      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
      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
      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
      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
      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
      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
      0  

    Exclamation 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
      3  

    Default 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()
        });
        
    });

Page 29 of 32 FirstFirst ... 192728293031 ... LastLast

Posting Permissions

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