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

Thread: convert html table to a nice looking grid

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default Answered: convert html table to a nice looking grid

    Hi,

    How to convert a existing table to Ext 4 grid?

    cheers.
    thanks a lot.

  2. change this (ext407 - extjs folder):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       
        <title>Border Layout Example</title>
        <link rel="stylesheet" type="text/css" href="ext407/resources/css/ext-all.css">
        <style type="text/css">
            #the-table { 
                border:1px solid #bbb;
                border-collapse:collapse; 
            }
            #the-table td,#the-table th { 
                border:1px solid #ccc;
                border-collapse:collapse;
                padding:5px; 
            }
        </style>
        <script type="text/javascript" src="ext407/bootstrap.js"></script>
        <script type="text/javascript" src="ext407/ext-all.js"></script>
        <script type="text/javascript">
            Ext.Loader.setConfig({
                enabled: true
            });
            Ext.Loader.setPath('Ext.ux', 'ext407/examples/ux');
            Ext.require([
                'Ext.data.*',
                'Ext.grid.*',
                'Ext.ux.grid.TransformGrid'
            ]);
            Ext.onReady(function() {
                alert('here')
                var btn = Ext.get("create-grid");
                btn.on("click", function(){
                    btn.dom.disabled = true;
                    
                    // create the grid
                    var grid = Ext.create('Ext.ux.grid.TransformGrid', "the-table", {
                        stripeRows: true,
                        height: 130
                    });
                    grid.render();
                });
                
            });
        </script>
    </head>
    <body >
    <button id="create-grid" type="button">Create grid</button>
    <table cellspacing="0" id="the-table">
            <thead>
                <tr style="background:#eeeeee;">
                    <th>Name</th>
                    <th style="width: 40px;">Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Barney Rubble</td>
                    <td>32</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Fred Flintstone</td>
                    <td>33</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Betty Rubble</td>
                    <td>32</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Pebbles</td>
                    <td>1</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Bamm Bamm</td>
                    <td>2</td>
                    <td>Male</td>
                </tr>
            </tbody>
        </table>
    
    
    </body></html>

  3. #2

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default

    chramer,

    thanks...but i can't get this to work...any im missing with?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       
        <title>Border Layout Example</title>
        <link rel="stylesheet" type="text/css" href="border-layoutextjs_files/ext-all.css">
        <style type="text/css">
            #the-table { 
                border:1px solid #bbb;
                border-collapse:collapse; 
            }
            #the-table td,#the-table th { 
                border:1px solid #ccc;
                border-collapse:collapse;
                padding:5px; 
            }
        </style>
        <script type="text/javascript" src="border-layoutextjs_files/bootstrap.js"></script>
        <script type="text/javascript" src="border-layoutextjs_files/ext-all.js"></script>
        <script type="text/javascript">
            Ext.Loader.setConfig({
                enabled: true
            });
            Ext.Loader.setPath('Ext.ux', '../ux');
            Ext.require([
                'Ext.data.*',
                'Ext.grid.*',
                'Ext.ux.grid.TransformGrid'
            ]);
            Ext.onReady(function() {
                alert('here')
                var btn = Ext.get("create-grid");
                btn.on("click", function(){
                    btn.dom.disabled = true;
                    
                    // create the grid
                    var grid = Ext.create('Ext.ux.grid.TransformGrid', "the-table", {
                        stripeRows: true,
                        height: 130
                    });
                    grid.render();
                });
                
            });
        </script>
    </head>
    <body >
    <button id="create-grid" type="button">Create grid</button>
    <table cellspacing="0" id="the-table">
            <thead>
                <tr style="background:#eeeeee;">
                    <th>Name</th>
                    <th style="width: 40px;">Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Barney Rubble</td>
                    <td>32</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Fred Flintstone</td>
                    <td>33</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Betty Rubble</td>
                    <td>32</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Pebbles</td>
                    <td>1</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Bamm Bamm</td>
                    <td>2</td>
                    <td>Male</td>
                </tr>
            </tbody>
        </table>
    
    
    </body></html>

  5. #4
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    change this (ext407 - extjs folder):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       
        <title>Border Layout Example</title>
        <link rel="stylesheet" type="text/css" href="ext407/resources/css/ext-all.css">
        <style type="text/css">
            #the-table { 
                border:1px solid #bbb;
                border-collapse:collapse; 
            }
            #the-table td,#the-table th { 
                border:1px solid #ccc;
                border-collapse:collapse;
                padding:5px; 
            }
        </style>
        <script type="text/javascript" src="ext407/bootstrap.js"></script>
        <script type="text/javascript" src="ext407/ext-all.js"></script>
        <script type="text/javascript">
            Ext.Loader.setConfig({
                enabled: true
            });
            Ext.Loader.setPath('Ext.ux', 'ext407/examples/ux');
            Ext.require([
                'Ext.data.*',
                'Ext.grid.*',
                'Ext.ux.grid.TransformGrid'
            ]);
            Ext.onReady(function() {
                alert('here')
                var btn = Ext.get("create-grid");
                btn.on("click", function(){
                    btn.dom.disabled = true;
                    
                    // create the grid
                    var grid = Ext.create('Ext.ux.grid.TransformGrid', "the-table", {
                        stripeRows: true,
                        height: 130
                    });
                    grid.render();
                });
                
            });
        </script>
    </head>
    <body >
    <button id="create-grid" type="button">Create grid</button>
    <table cellspacing="0" id="the-table">
            <thead>
                <tr style="background:#eeeeee;">
                    <th>Name</th>
                    <th style="width: 40px;">Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Barney Rubble</td>
                    <td>32</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Fred Flintstone</td>
                    <td>33</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Betty Rubble</td>
                    <td>32</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Pebbles</td>
                    <td>1</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Bamm Bamm</td>
                    <td>2</td>
                    <td>Male</td>
                </tr>
            </tbody>
        </table>
    
    
    </body></html>

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default

    chramer,

    Thanks.

    anyway, pleas help if could find solution to this problem: http://www.sencha.com/forum/showthre...size-dockitems

    cheers.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default

    And, how can get the selected row id?

    thanks again.
    cheers.

  8. #7
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    grid.getSelectionModel().getSelection()[0].getId()

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default

    thanks...how can i set an ID for that example of table?

  10. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    25

    Default

    Quote Originally Posted by chramer View Post
    grid.getSelectionModel().getSelection()[0].getId()
    i got "undefined" when i try to get the Id. any idea how i can achieve this?

    cheers

  11. #10
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    if you didn't set an 'idProperty' for the model it won't work...
    you can also get it like this :
    grid.getSelectionModel().getSelection()[0].get('fieldname')

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
  •