테이블 레이아웃의 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 ​​콘텐츠만큼 많은 공간을 필요로하기 때문에 폭의 50 %를 차지합니다. 셀 D 콘텐츠는 셀 C 콘텐츠만큼의 공간이 필요하기 때문에 세 번째 열은 50 % 두 번째 열은 0 %로 감소합니다.

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

그런 다음 당신이 열 병합가 제대로 작동 참조 : 당신이 열 병합하지 않고 셀 D 아래에 행을 추가하는 경우

당신은 자신을 위해 그것을 볼 수 있습니다.

업데이트 : 방금 해결 방법을 찾았습니다. 그것은 ... 먼저

찾을 사소한 아니라, 당신이 레이아웃에 폭을 추가해야합니다 :

columns: 3, 
    tdAttrs:{ 
     width:100 
    } 

둘째, 모든 셀에 폭을 추가해야합니다 :

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

돈 ' 왜 그것이 작동하는지 물어 보지 않습니다, 나는 잘 모릅니다, 그것은 반 직관적입니다.