Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    30
    Vote Rating
    0
    diovani is on a distinguished road

      0  

    Default Unanswered: Table Layout not respecting number of columns for cells

    Unanswered: Table Layout not respecting number of columns for cells


    I'm trying to use a TableLayout to place elements divided into a three column layout, but ExtJs creates only two columns and render the cells in incorrect position.

    PHP Code:
                    Ext.create('Ext.Panel', {
                        
    title'Teste Table Layout',
                        
    renderToExt.getBody(),
                        
    width300,
                        
    layout: {
                            
    type'table',
                            
    columns3,
                        },
                        
    style: {overflow'visible'}, //overflow just to see the last cell
                        
    bodyStyle: {overflow'visible'},
                        
    defaults: {
                            
    bodyStyle: {border'1px solid green'},
                            
    height50
                        
    },
                        
    items: [{
                            
    colspan3,
                            
    width300
                        
    },{
                            
    colspan2,
                            
    width200
                        
    }, {
                            
    colspan1,
                            
    width100
                        
    }, {
                            
    colspan1,
                            
    width100
                        
    }, {
                            
    colspan2,
                            
    width200
                        
    }]
                    })
                }); 
    The expected result is like this:
    Code:
                    +------------------+
                    |                  |
                    +-----------+------+
                    |           |      |
                    +-----+-----+------+
                    |     |            |
                    +-----+------------+
    But I get something like this:
    Code:
                    +------------------+
                    |                  |
                    +-----------+------+
                    |           |      |
                    +-----+-----+------+-----+
                    |     |     |            |
                    +-----+     +------+-----+
    To check if that is not an HTML problem I've simulated the layout with a simple Table, as follows:
    HTML Code:
            <style type="text/css" media="screen">
                #t1 {
                    width: 300px;
                }
                #t1 td {
                    height: 50px;
                    border: 1px solid blue;
                }
            </style>
            <table id="t1">
                <tr>
                    <td colspan="3">&nbsp; </td>
                </tr>
                <tr>
                    <td colspan="2" style="width: 200px;">&nbsp; </td>
                    <td colspan="1" style="width: 100px;">&nbsp; </td>
                </tr>
                <tr>
                    <td colspan="1" style="width: 100px;">&nbsp; </td>
                    <td colspan="2" style="width: 200px;">&nbsp; </td>
                </tr>
            </table>

  2. #2
    Sencha User
    Join Date
    May 2009
    Posts
    30
    Vote Rating
    0
    diovani is on a distinguished road

      0  

    Default


    Bug 807 seens to report the same problem, in Ext 3. Never fixed.

  3. #3
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Yeah, I get the same behavior and tried several other permutations, all with the same broken result.

    As a work around, I guess you could stack several panels with hbox layouts into in a container with a vbox layout.

  4. #4
    Sencha User
    Join Date
    May 2009
    Posts
    30
    Vote Rating
    0
    diovani is on a distinguished road

      0  

    Default


    Noticed a moment ago that Firefox doesn't show the expected result even with the common HTML table. Neither IE9 using Quirks Mode.

    The only workaround I could find is to always have a line with the max number of cells (all with colspan = 1). This makes the layout work fine.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar