CODEWITHSUNDEEP
javascriptdatetimeextjstextfieldsetvalue
vanaraj
vanaraj

Reputation: 39

how to set datetime Value for extjs textfield?

There is an array of items:

items: [{
  fieldLabel: 'Username:',
  id: 'usernameID',
  readOnly: true,
  value: user.username,
  name: "username"
}]

I need to set the date time value to this text field:

Ext.getCmp('usernameID').setValue(Fromdate);

In from date I get value of datetime. But while setting I am getting:

Uncaught TypeError: Cannot read property 'setValue' of undefined

Upvotes: 1

Views: 3852

Answers (2)

Alexandre Neukirchen
Alexandre Neukirchen

Reputation: 2783

First define the type of your object with the xtype property. After that you need to get the date you want to set. In this example I used the ExtJS datepicker to get the date, but you can also use new Date().

Once the date has been obtained you need to format it with the format function, and then set your object with this formatted value. In this example I used two formats Y-d-m (Year, Month and Day) andd-m-Y (Day, Month and Year). For more information on format access this link.

To test in other versions of ExtJS access this fiddle.

   Ext.create('Ext.window.Window', {
    title: 'Set Date',
    closable: false,
    width: 500,
    layout: 'vbox',
    bodyStyle: 'padding: 5px;',
    items: [{xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'datepicker',
                minDate: new Date(),
                bodyStyle: 'padding-left: 50px;',
                handler: function(picker, date) {
                    Ext.getCmp('txtDate1').setValue(Ext.Date.format(date, 'Y-m-d'));
                    Ext.getCmp('txtDate2').setValue(Ext.Date.format(date, 'd-m-Y'));
                }
            }, {
                xtype: 'container',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Date 1:',
                        labelAlign: 'right',
                        id: 'txtDate1',
                        width: 200
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Date 2:',
                        labelAlign: 'right',
                        id: 'txtDate2',
                        width: 200
                    }]
            }]
        }]
}).show();
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>

Upvotes: 0

pagep
pagep

Reputation: 3629

You don't have xtype defined in your items. Are you using the default xtype for the items? Is your textfield or anything even rendered?

This code is functional:

items: [{
    xtype: 'textfield',
    id: 'myCustomId',
    fieldLabel: 'Label',
    name: 'username',
    value: 'something',
    readOnly: true
}, {
    xtype: 'button',
    handler: function (button, e) {
        var cmp = Ext.getCmp('myCustomId');
        cmp.setValue(Ext.Date.format(new Date(), 'Y-m-d'))
    },
    text: 'Set the value'
}]

Check out fiddle https://fiddle.sencha.com/#view/editor&fiddle/1m7f

In case this does not help you post more parts of your code.

Upvotes: 1

Related Questions