日期范围vtype,无法理解它是如何工作的,extjs 4

时间:2013-12-09 16:28:59

标签: extjs4 date-range daterangepicker

我有一个带有两个日期字段的表单,他们必须定义一个日期范围,所以结束不能在开始之前;它们都是由两个日期选择器制作的,它应该在" start"之前禁用日期。在"结束"。我找到了this手册页,其中包含一些要粘贴的代码,但我无法将此代码粘贴到我的页面中而不会出现错误。也许我的页面太复杂但我不这么认为,我认为只有我无法弄清楚在哪里粘贴代码而不会使所有其他代码都失败。以下是我的页面代码:

Ext.define('MyDesktop.count', {
extend: 'Ext.ux.desktop.Module',

requires: [
    'Ext.ux.desktop.DatabaseModel',
    //'Ext.ux.desktop.UserModel',
    'Ext.data.TreeStore',
    'Ext.layout.container.Accordion',
    'Ext.toolbar.Spacer',
    'Ext.tree.Panel'
],

id:'count',

init : function(){
this.launcher = {
        text: 'count',
        iconCls:'accordion'

    };
},

createWindow : function(){
    var App = this.app;
    var desktop = this.app.getDesktop();
    var win = desktop.getWindow('count-win');
    if (!win) {
        win = desktop.createWindow({
            id: 'count-win',
            title: 'count',
            width: 350,
            height: 200,
            animCollapse: false,
            maximizable: false,
            resizable: false,
            //constrainHeader: true,
            //bodyBorder: true,
            layout : 'anchor',
            items:[
                {
                xtype : 'fieldset',
                border: false,
                defaultType: 'textfield',
                items: [
                        {
                        xtype: 'datefield',
                        fieldLabel: 'Start date',
                        format: 'Ymd',
                        id:"start",
                        //altFormats: 'Ymd',
                        vtype: 'daterange',
                        endDateField: 'end'
                        },
                        {
                        xtype: 'datefield',
                        fieldLabel: 'End date',
                        format: 'Ymd',
                        id: "end",
                                             //minValue: Ext.getCmp('start').getValue(),
                        //altFormats: 'm/d/Y',
                        vtype: 'daterange',
                        startDateField: 'start'
                        },
                        {
xtype: 'combo',
fieldLabel: 'Client',
   id:"client",
hiddenName: 'client',
store: new Ext.data.SimpleStore({
    data: [
        ['applix', 'applix'],
        ['banzai', 'banzai'],
        ['banzai-cooking', 'banzai - cooking'],
        ['integralAS', 'integralAS'],
        ['LinkSmart', 'LinkSmart'],
        ['nbcuniversal', 'nbcuniversal'],
        ['primenetwork', 'primenetwork'],
        ['quag', 'quag'],
        ['turnEU', 'turnEU'],
        ['turnUS', 'turnUS']
    ],
    id: 0,
    fields: ['value', 'text']
}),
valueField: 'value',
displayField: 'text',
triggerAction: 'all',
editable: false
}       

                        ]


                }




            ],

            buttons: [{
                            text: 'Submit',
                            handler: function() {
                                console.log(this);
                                                           start= Ext.util.Format.date(Ext.getCmp('start').getValue(),'Ymd');
                                end= Ext.util.Format.date(Ext.getCmp('end').getValue(),'Ymd');
                                //period = Ext.getCmp('period').value;
                                client = Ext.getCmp('client').value;
                                Ext.Ajax.request({
                                            method : "GET",
                                            url : 'http://whatever.com/count?client='+client+'&start='+start+'&end='+end,

                                            timeout : 30000,
                                            success :
                                                                                      function (response) {
                                                                                      //console.log(Ext.getCmp('to_add'))
                                                                                       Ext.Msg.alert(response.responseText);
                                                                                       desktop.getWindow('count-win').doClose();
                                                                                      }//handler

                                                ,
                                            failure : 
                                                function(response) {
                                                    alert("Wrong request");
                                                }
                                        });
                                }



    }]
    });
    }

    return win;
}
});

vtypes已经在那里,我应该把监听器和/或函数放在哪里来处理daterage属性而不删除所有其余的代码?我应该在stackoverflow上使用一些监听器(但是我尝试了,窗体的窗口不再工作了)或者我应该使用手册中的代码吗?任何人都有这方面的经验吗?

1 个答案:

答案 0 :(得分:1)

那么,答案更简单,乍一看似乎你必须使用vtype保留解决方案(这很难,但不起作用)。然后你必须为你添加一个监听器:

xtype: "datefield",

代码在这里:

{
                        xtype: 'datefield',
                        fieldLabel: 'Start date',
                        format: 'Ymd',
                        id:"start",
                        //altFormats: 'Ymd',
                        vtype: 'daterange',
                        endDateField: 'end',
                        listeners:{
                            'change': function(th,a){
                             Ext.getCmp('end').setMinValue(a);
                        }
                        }},

更改第一个日期字段时,它会更改第二个日期字段的minValue。 这很简单,对我有用。