Colspan des Tabellenlayouts funktioniert nicht

Question

Ich versuche, Tabellenlayout Arbeit auf einem Panel zu bekommen, das Layout funktioniert gut, bis ich "Colspan" zu ihm einführen.

In dem api docs http://docs.sencha.com/extjs/6.0.1-classic/Ext.layout.container.Table.html, gibt es eine Geige, die bis ich läuft gut, den Code zu

Ext.create('Ext.panel.Panel', { 
    title: 'Table Layout', 
    width: 300, 
    height: 150, 
    layout: { 
     type: 'table', 
     // The total column count must be specified here 
     columns: 3 
    }, 
    defaults: { 
     // applied to each contained panel 
     bodyStyle: 'padding:20px', 
     style: 'border: 1px solid black' 
    }, 
    items: [{ 
     html: 'Cell A content' 
    },{ 
     html: 'Cell B content', 
     colspan: 2 
    },{ 
     html: 'Cell C content', 
     colspan: 2 
    },{ 
     html: 'Cell D content' 
    }], 
    renderTo: Ext.getBody() 
}); 

Hinweis ändern, dass alle jetzt Zellen gleiche Breiten haben. Warum funktioniert Colspan nicht?

Answer 1

Es funktioniert, aber nicht wie erwartet, weil jede Zelle so viel Platz benötigt wie nötig und die Spalten entsprechend dimensioniert sind.

Auf diese Weise nimmt die erste Spalte 50% der Breite, da Zelle A-Inhalt so viel Platz benötigt wie Zelle B-Inhalt, die dritte Spalte 50%, da Zelle D-Inhalt so viel Platz benötigt wie Zelle-C-Inhalt, und die zweite Spalte ist auf 0% reduziert.

Sie können das für sich selbst sehen, wenn Sie unten Zelle D eine Zeile ohne colspan hinzufügen:

{ 
    html: 'Cell E content', 
},{ 
    html: 'Cell F content' 
},{ 
    html: 'Cell G content' 
} 

Dann sehen Sie, dass colspan richtig funktioniert.

Update: Ich habe gerade gefunden, wie es zu beheben ist. Es ist nicht trivial zu finden ...

Zuerst Sie Breite, um das Layout hinzufügen:

columns: 3, 
    tdAttrs:{ 
     width:100 
    } 

Zweitens müssen Sie Breiten auf alle Zellen hinzu:

html: 'Cell A content', 
    width:100 
},{ 
    html: 'Cell B content', 
    colspan: 2, 
    width:200 
... 

Don‘ t fragen warum es funktioniert, ich weiß es einfach nicht, es ist völlig kontraintuitiv.