ExtJS column布局后labelField无法显示的问题-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3856/article/details/82310393

本文详细介绍了使用Extjs的column布局时可能遇到的问题及其解决方案，包括控件显示问题、label缺失及错位等，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2. 为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3. 在每个column里再加上form layout，再在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/
	        }]
        }
        ]
    }]
})