ExtJS column 레이아웃 후 labelField에 표시되지 않는 문제

처음 Extjs의column 레이아웃을 사용할 때 많은 문제를 만났습니다. 기록하여 참고하시기 바랍니다.column 레이아웃에서 label이 표시되지 않거나 컨트롤이 위치를 잘못 표시하는 등 자주 볼 수 있습니다. 이러한 문제의 흔한 원인은 다음과 같습니다.
1.formPanel의 컨트롤이 표시되지 않습니다. 컨트롤의 폭이 너무 크고formpanel의 폭이 상대적으로 작아서 발생합니다.
2. FormPanel에 defaultType 속성을 설정했고 모든 컨트롤에 xtype 속성을 따로 지정하지 않았습니다.올바른 방법은 defaultType을 설정하지 않는 것입니다.
3. 모든column에formlayout을 더하고form에textfield를 추가합니다.
4. TabPanel을 새로 만들 때 속성 layoutOnTabChange를true로 설정하면 됩니다.(이 방법은 일반적이지 않음)
Extjs를 개발할 때 두 개의 textField나datefield를 나란히 표시하려면 column 스타일의 layout을 사용해야 합니다. 그러나 items에 항목을 표시할 때 모든 fieldLabel이 표시되지 않습니다. 왜냐하면 그 column 스타일은 label을 표시할 수 없기 때문입니다. 중간 층에 layout:'form'을 덧붙이고 label의 항목을 이 form 층의 하위 항목으로 표시하면 됩니다.

var pneast8 = new Ext.Panel({
    region: 'center',
    //    layout:'form',
    frame: true,
    bodyStyle: 'padding:5px 5px 0',
    items: [
    {
        xtype: 'fieldset',
        height: 100,
        width: 500,
        layout: 'column', // 
        items: [{
            width:220,
            layout: 'form',
            labelWidth: 60,
            defaults: {width: 120},
            items: [
            {
                xtype: 'datefield',
                fieldLabel: ' ',
                name: 'startdt8',
                id: 'startdt8',
                endDateField: 'enddt8' // id of the end date field
            }]
        }, {
            width: 220,
            layout: 'form',
            labelWidth: 60,
            defaults: {width: 120},
            items:[
            {
                xtype: 'datefield',
			    fieldLabel: ' ',
			    name: 'enddt8',
			    id: 'enddt8',
			    startDateField: 'startdt8' // id of the start date field/
	        }]
        }
        ]
    }]
})