dontide
2009-08-14 11:01
浏览 249

Ext 时间控件

我在界面上有一个时间控件,代码为:
[quote]
layout : 'form',
columnWidth : 1,
bodyStyle : 'padding:3px 5px',
border : false,
hideLabel : true,
items : [{
fieldLabel : '时间选择',
xtype : 'datefield',
readOnly : true,
format : 'Y-m-d',
anchor : '90%'
}]
[/quote]

这个Form表单的完整代码如下:
[quote]
var jzForm = new Ext.FormPanel({
labelWidth : 70,
frame : true,
height : 110,
width : 280,
bodyStyle : 'padding:5px 5px 5px 5px',
items : [{
xtype : 'fieldset',
title : '查询条件',
collapsible : true,
width : 255,
height : 80,
items : [{
layout : 'column',
items : [{
layout : 'form',
columnWidth : .35,
bodyStyle : 'padding:3px 5px',
border : false,
hideLabels : true,
items : [new Ext.form.Radio({
boxLabel : '日报',
name : 'tjbb_data_type',
inputValue : 1,
checked : true,
listeners : {
'check' : dateType
}
})]
}, {
layout : 'form',
columnWidth : .35,
bodyStyle : 'padding:3px 5px',
border : false,
hideLabels : true,
items : [new Ext.form.Radio({
boxLabel : '月报',
name : 'tjbb_data_type',
inputValue : 2,
checked : false,
listeners : {
'check' : dateType
}
})]
}, {
layout : 'form',
columnWidth : .3,
bodyStyle : 'padding:3px 5px',
border : false,
hideLabels : true,
items : [new Ext.form.Radio({
boxLabel : '年报',
name : 'tjbb_data_type',
inputValue : 3,
checked : false,
listeners : {
'check' : dateType
}
})]
} ,{
layout : 'form',
columnWidth : 1,
bodyStyle : 'padding:3px 5px',
border : false,
hideLabel : true,
items : [{
fieldLabel : '时间选择',
xtype : 'datefield',
readOnly : true,
format : 'Y-m-d',
anchor : '90%'
}]
}]
}]
}]
});

function dateType(r, checked){
    if(checked){
        if(r.getRowValue() == 1){

        }else if(r.getRowValue() == 2){

        }else if(r.getRowValue() == 3){

        }
    }
}

[/quote]

里面有三个单选按钮,分别为:日报,月报,年报。我现在的需求是,我想在选择一个单选按钮后时间控件里面的格式跟着变化,意思就是我如果选择日报,时间的format属性就为‘Y-m-d’。如果我选择月报,时间的format属性就为‘Y-m’。如果我选择年报,时间的format属性就为‘Y’,通过单选按钮动态的改变时间格式,时间控件就一个,怎么才可以做到改变格式。希望大家能帮帮我,如果还有别的方法也可行,只要不离开这三个单选按钮和一个时间控件就行了,谢谢了。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • iteye_10013 2009-08-14 11:33
    已采纳

    就这么简单:
    [code="javascript"]
    var df = new Ext.form.DateField({
    fieldLabel:'时间',
    format:'Y-m-d'
    })

    var btn = new Ext.Button({
    text:'改变',
    handler:function()
    df.format = 'Y-m';
    df.setValue(df.getValue())
    }
    })
    [/code]

    另外,下次发问题的时候,

    1.用code套起来,不是quote
    2.格式下代码,在线的如[url]http://jsbeautifier.org/[/url]

    点赞 评论
  • zhoujuan520 2009-08-14 11:23

    看起来真累。帮你格式化一下啊 :twisted:

    我在界面上有一个时间控件,代码为:
    [code="js"]
    layout: 'form',
    columnWidth: 1,
    bodyStyle: 'padding:3px 5px',
    border: false,
    hideLabel: true,
    items: [{
    fieldLabel: '时间选择',
    xtype: 'datefield',
    readOnly: true,
    format: 'Y-m-d',
    anchor: '90%'
    }]
    [/code]

    这个Form表单的完整代码如下:

    [code="js"]
    var jzForm = new Ext.FormPanel({
    labelWidth: 70,
    frame: true,
    height: 110,
    width: 280,
    bodyStyle: 'padding:5px 5px 5px 5px',
    items: [{
    xtype: 'fieldset',
    title: '查询条件',
    collapsible: true,
    width: 255,
    height: 80,
    items: [{
    layout: 'column',
    items: [{
    layout: 'form',
    columnWidth: .35,
    bodyStyle: 'padding:3px 5px',
    border: false,
    hideLabels: true,
    items: [new Ext.form.Radio({
    boxLabel: '日报',
    name: 'tjbb_data_type',
    inputValue: 1,
    checked: true,
    listeners: {
    'check': dateType
    }
    })]
    },
    {
    layout: 'form',
    columnWidth: .35,
    bodyStyle: 'padding:3px 5px',
    border: false,
    hideLabels: true,
    items: [new Ext.form.Radio({
    boxLabel: '月报',
    name: 'tjbb_data_type',
    inputValue: 2,
    checked: false,
    listeners: {
    'check': dateType
    }
    })]
    },
    {
    layout: 'form',
    columnWidth: .3,
    bodyStyle: 'padding:3px 5px',
    border: false,
    hideLabels: true,
    items: [new Ext.form.Radio({
    boxLabel: '年报',
    name: 'tjbb_data_type',
    inputValue: 3,
    checked: false,
    listeners: {
    'check': dateType
    }
    })]
    },
    {
    layout: 'form',
    columnWidth: 1,
    bodyStyle: 'padding:3px 5px',
    border: false,
    hideLabel: true,
    items: [{
    fieldLabel: '时间选择',
    xtype: 'datefield',
    readOnly: true,
    format: 'Y-m-d',
    anchor: '90%'
    }]
    }]
    }]
    }]
    });

    function dateType(r, checked) {
    if (checked) {
    if (r.getRowValue() == 1) {

        } else if (r.getRowValue() == 2) {
    
        } else if (r.getRowValue() == 3) {
    
        }
    }
    

    }
    [/code]

    里面有三个单选按钮,分别为:日报,月报,年报。我现在的需求是,我想在选择一个单选按钮后时间控件里面的格式跟着变化,意思就是我如果选择日报,时间的format属性就为‘Y-m-d’。如果我选择月报,时间的format属性就为‘Y-m’。如果我选择年报,时间的format属性就为‘Y’,通过单选按钮动态的改变时间格式,时间控件就一个,怎么才可以做到改变格式。希望大家能帮帮我,如果还有别的方法也可行,只要不离开这三个单选按钮和一个时间控件就行了,谢谢了。

    点赞 评论
  • zhoujuan520 2009-08-14 11:27

    貌似格式是固定死的。

    有一个办法就是你冬天移除这个日期组件,然后动态再创建一个日期组件插入到界面中。新增加的组件的格式可以再创建是设定。

    点赞 评论

相关推荐 更多相似问题