Results 1 to 2 of 2

Thread: GridPanel - GroupingView add record to group?

  1. #1
    Ext User
    Join Date
    Mar 2010
    Vote Rating

    Question 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.

    Ext.DDGrid = Ext.extend(Ext.grid.GridPanel, {
        initComponent : function() {
            var data =;
            var name =;
            var region = this.initialConfig.region;
            var reader = new{}, [
               {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{
                reader: reader,
                data: data,
                sortInfo:{field: 'company', direction: "ASC"},
            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 (['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;
                      'name', 'ASC');
                                return true
            Ext.apply(this, {
                layout: 'border',
                height: 400,
                width: 500,
                items: [
            Ext.BigContainer.superclass.initComponent.apply(this, arguments);
    var container = new Ext.BigContainer();;
    (function() {
        var record = container.get(0).store.getAt(0);

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Vote Rating


    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

Tags for this Thread

Posting Permissions

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