1. #11
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,346
    Vote Rating
    134
    LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all LesJ is a name known to all

      0  

    Default


    Quote Originally Posted by michael melsen View Post
    Hi guys,

    "can someone please explain the motivation in moving towards TABLE layouts in 4.1 where previous ExtJS versions had clean DIV constructs?"

    if this is true this could cause serious problems in supporting WCAG 2.0. One part of WCAG which is used to support accessibility is, states that the use of table elements should be used :

    "to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived." see http://www.w3.org/TR/WCAG20-TECHS/H51.html

    so when table elements are used instead of divs to make up widgets and stuff, this could cause screenreaders to read this layout stuff too.

    On WCAG's site:

    "Suppose that a Web page is laid out using a table with 9 columns and 22 rows. The screen reader speaks the content of the cell at Column 1, Row 1 followed by the cells in columns 2, 3, 4 and so on to column 9. However, if any cell contains a nested table, the screen reader will read the entire nested table before it reads the next cell in the original (outer) table. For example, if the cell at column 3, row 6 contains a table with 6 columns and 5 rows, all of those cells will be read before Column 4, Row 6 of the original (outer) table. As a result, the meaningful sequence conveyed through visual presentation may not be perceivable when the content is spoken by a screen reader." see http://www.w3.org/TR/WCAG20-TECHS/F49.html

    can someone confirm if the use of table layouts interferes with the wcag rules?

    regards,

    Michael
    Specify role="presentation" as the table attribute. This will ensure accessibility to work well for users.

  2. #12
    Sencha Premium Member
    Join Date
    Oct 2007
    Posts
    12
    Vote Rating
    0
    ATN is on a distinguished road

      0  

    Default


    I totally agree with gilfeather.

  3. #13
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,382
    Vote Rating
    136
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Quote Originally Posted by stan.cristian88 View Post
    anyone has a suggestion what should I do so in the next version I would be able to use this layout?
    The requirement is that there are some form items (textfields, combos, radios, etc) arranged in 2 columns - and some on just one (big textareas). Of course the first option was to use column layout, but it was really slow. Table layout was much faster but the items had a fixed width - it has to be relative to the layout column size and change on resize window.
    ...snip...
    Of course that now with the new table in table inception this will not work. I would be grateful if somebody has a suggestion with an easy fix.
    Maybe a small screen shot or two would help us understand the result you are after. Off-hand, a field container might by what you need, but that is just a guess given your description.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #14
    Sencha User
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    0
    stan.cristian88 is on a distinguished road

      0  

    Default


    Quote Originally Posted by dongryphon View Post
    Maybe a small screen shot or two would help us understand the result you are after. Off-hand, a field container might by what you need, but that is just a guess given your description.
    Thanks Don Griffin for interest. So the requirement was to create something like this: table1.jpg

    So, two columns, in each column some input fields, first field to be focused; when user clicks tab key he can circle through all fields from left-right, top-down (with column layout this focus thing was not working - but I saw not it's fixed with column layout. So I thought is pretty simple, a classical layout column situation. It all seemed to worked just fine; but in total there are between 60 and 100 items on one page, so with column layout it was really slow.

    So, we checked a little, and table layout seemed a lot more lightweight and right for this. The only problem was that because the table layout is not actually meant to handle field items, at first it looked like this: table3.jpg but it was much faster.

    So we made this custom component:
    Code:
     
    alias: 'layout.specialTable',
        extend: 'Ext.layout.container.Table',
        columns: 2,
        rightMargin: 20,
        tableAttrs:{
            width: '100%'
        },
        tdAttrs:{
            width:'50%'
        },
        renderItems: function(items) {
            var totalWidth = this.getLayoutTargetSize().width,
                len = items.length,
                i = 0, item, colNr;
    
            for (; i < len; i++) {
                item = items[i];
    
                colNr = this.columns;
                if ((colNr > 1) && Ext.isNumber(item.colspan)) {
                    colNr = colNr - item.colspan + 1;
                }
                item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
            }
            this.callParent(arguments);
        }
    and now it looks as in first image, and as you see, each field has the width slightly smaller then the cell (with rightMargin pixels smaller) table2.jpg and everything works ok. The problem is that now tackling the problem with the same idea in 4.1 will set the width to the new table in the cell, not to a field item. So if you have any kind of advice how we can achieve this with ExtJS 4.1 I think we can switch as soon as a stable version is released.

  5. #15
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,382
    Vote Rating
    136
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Does this fit your situation?

    PHP Code:
        Ext.onReady(function () {
            
    Ext.widget({
                
    xtype'panel',
                
    title'Test',
                
    layout: {
                    
    type'table',
                    
    columns2
                
    },
                
    renderToExt.getBody(),
                
    shrinkWraptrue,
                
    defaults: {
                    
    //labelWidth: 50
                
    },
                
    items: [{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 1'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 2'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 3'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 4'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 5'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 6'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 7'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 8'
                
    },{
                    
    xtype'textfield',
                    
    fieldLabel'Hello World 9'
                
    }]
            });
        }); 
    It produces the fields left-to-right using table layout. In this case, the width of the fields drives the width of the panel...

    It is a bit harder to make the fields stretch horizontally to fill the space, but it can be done. If that is what you are looking for.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"