Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Displaying grid header fields form grid vertically

  1. #1

    Exclamation Displaying grid header fields form grid vertically

    Hi,

    I wanted to display the header column in the grid vertically. All the values will be fetched from database by quering just want to display it vertically instead of normal horizontal display.I tried some ways but wasn't quiet successful.Can anybody help me regarding this????

    Is there any other way to display the fields vertically like shown below

    Header Field1 Value1
    Header Field2 Value2
    Header Field3 Value3

    Thanks in advance
    Amol

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Drop this into examples/grid

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
    
        // sample static data for the store
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val){
            if(val > 0){
                return '<span style="color:green;">' + val + '%</span>';
            }else if(val < 0){
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // create the data store
        var 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'}
            ],
            data: myData
        });
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            cls: 'vertical-header-grid',
            store: store,
            columns: [
                {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
                {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: document.body
        });
    });
    </script>
    <style type="text/css">
    .vertical-header-grid .x-grid3-header table,
    .vertical-header-grid .x-grid3-header-offset td {
       height: 100px!important;
    }
    
    .vertical-header-grid .x-grid3-hd-row td.x-grid3-hd * {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        width: 75px;
    }
    
    .ext-ie .vertical-header-grid .x-grid3-hd-row td.x-grid3-hd * {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        position: absolute;
        left: 25px;
        bottom: 20px;
    }
    
    .vertical-header-grid .x-grid3-hd-row td.x-grid3-hd {
        text-align: right;
        font-weight: bold;
        border-left-color: #fff;
    }
    
    .vertical-header-grid .x-grid3-hd-row td.x-grid3-hd {
        position: relative;
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    I got you started. You're on your own now.

  3. #3

    Exclamation

    Thanks Animal for your reply.Tried it But still I am not able to get the result.real real frustation

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    How?

    I get this in FF, Chrome and IE8:


  5. #5
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    The whole grid vertical instead of horizontal.
    Think he is wanting something like this:

    Company:
    3M Co
    Price: $71.72

  6. #6

    Default

    Hey Animal I want that full Header block to be displayed vertically not just the contents .with their respective values shown against them.I tried to do it but wasn't successful.After much frustation I gave it up

  7. #7

    Default

    Yes you are right aw1zard2

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Oh, I see, you want to switch round the whole orientation. I just thought you just wanted to display the header vertically.

    That will be more difficult.

  9. #9
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    Not sure this would be easy on the eyes with the grid switched around like that but I've used the dataview in a couple of apps.

    Here is an example of using it with custom css but can default it also.

    http://www.extjs.com/forum/showthrea...289#post412289


  10. #10

    Default

    Thanks aw1zard2 for your help I used dataview succesfully and obtained the results but still I am confused about using dataview to obtain the view I want Is there some other technique through which i can obtain the view?

Page 1 of 2 12 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
  •