第一次用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/
}]
}
]
}]
})