テーブルレイアウトのColspanが機能しない

Question

テーブルレイアウトの作業をパネル上で行おうとしていますが、レイアウトは「colspan」を導入するまでうまく動作します。 APIドキュメントhttp://docs.sencha.com/extjs/6.0.1-classic/Ext.layout.container.Table.htmlで

、 私はすべての細胞が、今等しい幅を有することを

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() 
}); 

お知らせにコードを変更それまでは正常に動作フィドルがあります。 colspanが機能しないのはなぜですか？

Answer 1

すべてのセルが必要なだけのスペースをとり、それに応じてサイズが調整されるため、期待どおりに動作しません。

このようにして、セルAのコンテンツはセルBのコンテンツと同じ容量を必要とするため、セルAのコンテンツはセルBのコンテンツと同じ容量を必要とするため、第2の列は0％に縮小される。

あなたはCOLSPANせずにセルDの下に行を追加する場合は、自分のためにそれを見ることができます：

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

その後、あなたはCOLSPANが正常に機能していることがわかります。

更新：私はそれを修正する方法を見つけました。それは...まず

見つけるのは簡単ではないですが、あなたはレイアウトに幅を追加する必要があります。

columns: 3, 
    tdAttrs:{ 
     width:100 
    } 

第二に、あなたはすべてのセルに幅を追加する必要があります。

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

ドン」なぜそれが働くのか尋ねると、わかりませんが、それは完全に直感的です。