1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      2  

    Default GridPanel row spanning (well, sort of...)

    GridPanel row spanning (well, sort of...)


    The current GridPanel implementation doesn't support row spanning, because the rows aren't part of the same table.

    The only thing you can do is make the grid look like it has row spanning by changing the css.

    Example:
    Code:
    <style type="text/css">
    .grid-row-span .x-grid3-row {
        border-bottom: 0;
    }
    .grid-row-span .x-grid3-col {
        border-bottom: 1px solid #ededed;
    }
    .grid-row-span .row-span {
        border-bottom: 1px solid #fff;
    }
    .grid-row-span .row-span-first {
        position: relative;
    }
    .grid-row-span .row-span-first .x-grid3-cell-inner {
        position: absolute;
    }
    .grid-row-span .row-span-last {
        border-bottom: 1px solid #ededed;
    }
    </style>
    <script type="text/javascript">
    Ext.onReady(function(){
        new Ext.Viewport({
            layout: 'fit',
            items: {
                xtype: 'grid',
                store: new Ext.data.ArrayStore({
                    fields: [
                       {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'}
                    ],
                    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&amp;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 &amp; Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
                        ['JP Morgan &amp; Chase &amp; 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 &amp; 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 &amp; 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']
                    ],
                    sortInfo: {
                        field: 'industry',
                        direction: 'ASC'
                    }
                }),
                cls: 'grid-row-span',
                columns: [
                    {header: "Industry", width: 200, sortable: true, renderer: function (value, meta, record, rowIndex, colIndex, store) {
                        var first = !rowIndex || value !== store.getAt(rowIndex - 1).get('industry'),
                            last = rowIndex >= store.getCount() - 1 || value !== store.getAt(rowIndex + 1).get('industry');
                        meta.css += 'row-span' + (first ? ' row-span-first' : '') +  (last ? ' row-span-last' : '');
                        if (first) {
                            var i = rowIndex + 1;
                            while (i < store.getCount() && value === store.getAt(i).get('industry')) {
                                i++;
                            }
                            var rowHeight = 20, padding = 6,
                                height = (rowHeight * (i - rowIndex) - padding) + 'px';
                            meta.attr = 'style="height:' + height + ';line-height:' + height + ';"';
                        }
                        return first ? value : '';
                    }, dataIndex: 'industry'},
                    {header: "Company", width: 300, sortable: true, dataIndex: 'company'},
                    {header: "Price", width: 100, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                    {header: "Change", width: 100, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
                    {header: "Last Updated", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                ],
                columnLines: true
            }
        });
    });
    </script>

  2. #2
    Sencha User adityavarma.mca's Avatar
    Join Date
    Jun 2012
    Location
    Hyderabad
    Posts
    6
    Vote Rating
    0
    adityavarma.mca is on a distinguished road

      0  

    Default Hi condor! can you plz post some example code for 'editorgrid'

    Hi condor! can you plz post some example code for 'editorgrid'


    My requirement is to edit the multiple rows at a time in grid( without saving the each row after editing it)....

    I need to allow the user to save all the changes in the grid with a save/update button ....
    (button was at the end of the grid in bbar)

    (I 'm using ExtJS4.0.1)

    Thnx in advance!
    -Regards
    Aditya.K.
    +91 9014447669.
    adityavarma.mca@gmail.com

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    gautamreddy is on a distinguished road

      0  

    Default


    Hi Condor/Aditya,
    Could you guys post the example here or mail it to me. I am trying to create a similar editor grid, but i am facing a lot of problem.

    Thanks.

  4. #4
    Sencha User
    Join Date
    Jul 2007
    Location
    Atlanta, Ga
    Posts
    28
    Vote Rating
    0
    ljkmchale is on a distinguished road

      0  

    Default Cell spanning

    Cell spanning


    I see a great example on how to do row spanning but I would like some help on cell spanning. I have a single row that needs to span across all cells. Is there anyway to do that. Attached is a screenshot.
    Attached Images
    Larry McHale

  5. #5
    Sencha User
    Join Date
    Mar 2014
    Posts
    1
    Vote Rating
    0
    pratik319 is on a distinguished road

      0  

    Default Force fit text stops working with this change

    Force fit text stops working with this change


    This is working but there is one problem. Since
    Code:
    .x-grid3-cell-inner
    is applied
    Code:
    position:absolute
    the
    Code:
    forcefit
    functionality stops working for that cell.

    Check this picture.after.jpg

    As you can see, event column's cell has lost forceFit since for its cells position : absolute is applied.

    Any idea how it can be achieved ?
    I have also asked this question in following stackoverflow question in comment section.
    http://stackoverflow.com/questions/1...-multiple-rows

Similar Threads

  1. Spanning Columns in a Grid based on Row Data
    By qqzm in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 10 Feb 2010, 3:39 AM
  2. gridPanel Sort
    By Chods in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 13 May 2009, 7:54 AM
  3. Replies: 11
    Last Post: 22 Apr 2009, 9:39 AM

Thread Participants: 4