Datefield 显示问题,求解~~~
 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
                }]
             },{
                ……代码省略
             }

 

显示结果是这样的

下面怎么显示出来,日期的说明文字?

日期在显示的时候还很窄:

 

怎么处理。。。。

4个回答

  1. fieldLabel配置只有父容器是FormLayout时才有效
  2. 如果是Ext3.x,试试这个补丁看看 [code="js"] Ext.override(Ext.DatePicker, { width : 200, onRender : Ext.DatePicker.prototype.onRender.createSequence(function(){ this.el.child('table').setWidth('100%'); }) }); [/code]

我也用过日期控件~而且是 日期时间一体的 当时也 遇到 控件显示不完整情况~然后用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'
}]
}]
}]
});

立即提问