var table = new Ext.FormPanel({ frame:true, layout:'table', defaults: { bodyStyle:'padding:1px;cursor:default;border:0px solid #fff;border-top-color:#fff;width:100%' }, layoutConfig: { columns:4 }, items: [{ width:270, labelWidth:70, labelAlign: 'right', layout:'form', fieldLabel: '起始日期', layout:'column', items:[{ xtype:'datefield', value: new Date(), format: 'Y-m-d', name: 'rstartDate', id:'rstartDate', width:100 },{ xtype:'datefield', value: new Date(), format:'Y-m-d', name: 'rendDate', id:'rendDate', width:100 }] },{ ……代码省略 }
显示结果是这样的
下面怎么显示出来,日期的说明文字?
日期在显示的时候还很窄:
怎么处理。。。。
我也用过日期控件~而且是 日期时间一体的 当时也 遇到 控件显示不完整情况~然后用IE8的 开发人员工具 找到了 原来是底层的 EXTJS 最基本的 JS文件里面的高度给小了 ,你这个估计也是相同情况 也可以去这个文件看看ext-all.js
是可以变长的啊,日期控件的显示长度
var queryForm = new Ext.form.FormPanel({
labelalign : "left",
region : 'north',
method : 'POST',
height : 42,
// frame : true,
id : 'tzbgQueryCond_Form',
items : [{
xtype : 'container',
layout : 'column',
items : [{
xtype : 'container',
layout : 'form',
columnWidth : 0.2,
labelWidth : 60,
items : [{
xtype : 'combo',
fieldLabel : '状态范围',
anchor : '98%',
store : 'zhuangtaifanwei_Store',
mode : 'local',
displayField : 'text',
valueField : 'value',
emptyText : '请选择状态范围',
editable : false,
triggerAction : 'all',// 点击下拉按钮全部显示
hiddenName : 'dto.declareId'
}]
}, {
xtype : 'container',
layout : 'form',
columnWidth : 0.4,
labelWidth : 60,
items : [{
xtype : 'datefield',
fieldLabel : '起始时间',
anchor : '98%',
format : 'Y-m-d',
editable : false,
name : 'dto.dtchangeStart'
}]
}, {
xtype : 'container',
layout : 'form',
columnWidth : 0.2,
labelWidth : 60,
items : [{
xtype : 'datefield',
fieldLabel : '结束时间',
anchor : '98%',
format : 'Y-m-d',
editable : false,
name : 'dto.dtchangeEnd'
}]
}, {
xtype : 'container',
layout : 'column',
columnWidth : 0.2,
labelWidth : 60,
items : [{
xtype : 'button',
text : '快速查询',
iconCls : 'search',
width : 100,
id : 'tzbgQuickQuery_Btn'
}, {
xtype : 'button',
text : '一键重置',
iconCls : 'reset',
width : 100,
id : 'tzbgQuickReset_Btn'
}]
}]
}]
});