DOM Exception when adding Item after row with all items rowspan>1

**m.k** · 13 Feb 2013 8:42 AM

REQUIRED INFORMATION
Ext version tested:

Ext 4.1.3

Browser versions tested against:

Chrome 20-24
IE8

DOCTYPE tested against:

<!DOCTYPE html>

Description:

When adding an item to a Container with TableLayout, after a row where all Elements have a rowspan > 1, there is no markup generated for the TableRow which has obviously no content. When the next row is inserted into the tBody, there is one row missing and therefore an exception is thrown. Error: INDEX_SIZE_ERR: DOM Exception 1

Steps to reproduce the problem:

Create a Container with table layout
Add one item with rowspan=2 for every column to fill the first row
use the .add-Method to add another item (which will apparently go to the next free row - the third row)
attempt to insert row at index 2, while tr at index 1 does not exist -> Exception

Test Case:
working code (initial rendering has no problem with this):

Code:

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    width: 350,
    layout:{
        type:'table', 
        columns:2
    },
    items: [{
        fieldLabel: 'First',
        xtype: 'textarea',
        rowspan: 2
    },{
        fieldLabel: 'Second',
        xtype: 'textarea',
        rowspan: 2
    },{
        fieldLabel: 'Third',
        xtype: 'textfield'
    }],
    renderTo: Ext.getBody()
});

not working:

Code:

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    width: 350,
    layout:{
        type:'table', 
        columns:2
    },
    items: [{
        fieldLabel: 'First',
        xtype: 'textarea',
        rowspan: 2
    },{
        fieldLabel: 'Second',
        xtype: 'textarea',
        rowspan: 2
    }],
    renderTo: Ext.getBody()
}).add({
    fieldLabel: 'Third',
    xtype: 'textfield'
});

also not working:

Code:

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    width: 350,
    layout:{
        type:'table', 
        columns:2
    },
    items: [],
    renderTo: Ext.getBody()
}).add({
    fieldLabel: 'First',
    xtype: 'textarea',
    rowspan: 2
},{
    fieldLabel: 'Second',
    xtype: 'textarea',
    rowspan: 2
},{
    fieldLabel: 'Third',
    xtype: 'textfield'
});

**mitchellsimoens** · 13 Feb 2013 12:12 PM

Thanks for the report! I have opened a bug in our bug tracker.

DOM Exception when adding Item after row with all items rowspan>1

Thread Tools

Search Thread

Display

DOM Exception when adding Item after row with all items rowspan>1

DOM Exception when adding Item after row with all items rowspan>1