日期:2014-05-16  浏览次数:20292 次

ExtJS column布局后labelField无法显示的问题
第一次用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/
	        }]
        }
        ]
    }]
})