1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    gunt is on a distinguished road

      0  

    Question GridPanel - GroupingView add record to group?

    GridPanel - GroupingView add record to group?


    When i add a record to the grid's store the record is not grouped under existing grouping view record.
    Is there something fancy i will need to do to get it to show directly under an existing group?

    ie. Drag first record under automotive from left grid to right grid. It does not show up under existing Automotive group.

    Code below should work directly from firebug.

    Code:
    Ext.DDGrid = Ext.extend(Ext.grid.GridPanel, {
        initComponent : function() {
            
            var data = this.initialConfig.data;
            var name = this.initialConfig.name;
            var region = this.initialConfig.region;
            
            var reader = new Ext.data.ArrayReader({}, [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
               {name: 'industry'},
               {name: 'desc'}
            ]);
            
            var store = new Ext.data.GroupingStore({
                reader: reader,
                data: data,
                sortInfo:{field: 'company', direction: "ASC"},
                groupField:'industry'
            });
            
            var columns = [
                {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
                {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
                {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ];
            
            var view = new Ext.grid.GroupingView({
                forceFit: true,
                getRowClass        : function(row, index) {
                    if (row.data['company'].length==0) return 'x-grid-group-body-hide';
                }
            });
            
            Ext.apply(this, {
                ddGroup          : name+'DDGroup',
                store            : store,
                columns             : columns,
                view             : view,
                enableDragDrop   : true,
                stripeRows       : true,
                title            : name,
                region             : region
            });
            
            Ext.DDGrid.superclass.initComponent.apply(this, arguments);
        }
    });
    
    Ext.BigContainer = Ext.extend(Ext.Window, {
        initComponent : function() {
            var groupData = [
                ['',0,0,0,'', 'Manufacturing'],
                ['',0,0,0,'', 'Finance'],
                ['',0,0,0,'', 'Services'],
                ['',0,0,0,'', 'Automotive'],
                ['',0,0,0,'', 'Computer'],
                ['',0,0,0,'', 'Medical'],
                ['',0,0,0,'', 'Food'],
                ['',0,0,0,'', 'Retail']
            ];
            
            var data = [
                ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
                ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
                ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
                ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
                ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
                ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
                ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
                ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
                ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
                ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
                ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
                ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
                ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
                ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
                ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
                ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
                ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
                ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
                ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
                ['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
                ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
                ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
                ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
                ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
                ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
                ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
                ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
                ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
                ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
                ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
            ];
            
            var left = new Ext.DDGrid({
                data: data,
                name: 'Left',
                width: 150,
                region: 'west'
            });
            
            var right = new Ext.DDGrid({
                data: groupData,
                name: 'Right',
                region: 'center'
            });
            
            right.on('render', function() {
                var firstGridDropTargetEl =  right.getView().scroller.dom;
                var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
                        ddGroup    : 'LeftDDGroup',
                        notifyDrop : function(ddSource, e, data){
                                var records =  ddSource.dragData.selections;
                                Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                                right.store.add(records);
                                right.store.sort('name', 'ASC');
                                return true
                        }
                });
            });
            
            Ext.apply(this, {
                layout: 'border',
                height: 400,
                width: 500,
                items: [
                    left,
                    right
                ]
            });
            
            Ext.BigContainer.superclass.initComponent.apply(this, arguments);
        }
    });
    
    var container = new Ext.BigContainer();
    container.show();
    
    
    (function() {
        var record = container.get(0).store.getAt(0);
        container.get(1).store.add(record);
    }).defer(1000);
    Cheers

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

      0  

    Default


    Obviously, the Records are grouped into the correct groups. If a Record is in the "Service" group, that's what it is in.

    PS. addSorted adds a record in sort order.

Similar Threads

  1. GridPanel/GroupingView Is it possible to group on one
    By ChiefDanGeorge in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 31 Mar 2010, 11:57 AM
  2. delete/add a record in my extend gridpanel
    By kurt schrauwen in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 Mar 2010, 5:16 AM
  3. GridPanel with Groupingview - How to catch group collapse/expand event
    By himmelr in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 13 Nov 2009, 11:10 AM
  4. How to add/create group,record in Group view GRID?
    By naga_cit in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Feb 2008, 10:57 PM

Thread Participants: 1

Tags for this Thread