Question

I am using extjs 4.1 .I have a grid that is showing date in desired time format. But when I want to show the date and intime and outtime in a window for edit then only date is displaying. but intime and outtime is not displaying. All the fields in database are datetime. Can anyone please help me on this. Here is my code below :

my grid is like below :

Ext.define('Ext4Example.view.attendence.Datagrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.datagrid',
    layout: 'fit',
    border: true,
    viewConfig: {
        stripeRows: true,
        forceFit:true,
        emptyText:'No Records to display'
    },

    hideHeaders: false,
    initComponent: function() {

        this.store = 'Attendences';
        //this.width = 400;      
        this.columns = [
        {
            text: 'Date',
            dataIndex: 'id',
            renderer: function(value, metaData){
                return Ext.Date.format(value, 'M d, Y');
            }
        },{
            text: 'Day',
            dataIndex : 'id',
            renderer: function(value, metaData){
                return Ext.Date.format(value, ' l');
            }
        },
        {
            text: 'In-Time',
            dataIndex: 'intime',
            renderer: function(value, metaData){
                return Ext.Date.format(value, 'h:i A');
            }
        },
        {
            text: 'Out-Time',
            dataIndex: 'outtime',
            renderer: function(value, metaData){
                return Ext.Date.format(value, 'h:i A');
            }
        }


        ];

        this.callParent(arguments);
    }
});

And the window is given below where i want the values for edit :

    Ext.define('Ext4Example.view.attendence.Editattendence' ,{
    extend: 'Ext.window.Window',
    alias : 'widget.editattendence',
    title: 'Edit Attendence',
    layout: 'fit',
    autoShow: true,
    initComponent: function () {
        this.items = [
        {
            xtype: 'form',

            bodyStyle: {
                background: 'none',
                padding: '10px',
                border: '0'
            },
            items: [
            {
                xtype: 'datefield',
                name: 'id',
                allowBlank: false,
                fieldLabel: 'Attendene ID'
            },
            {
                xtype: 'numberfield',
                name: 'intime',
                allowBlank: false,
                fieldLabel: 'IN TIME',
                renderer: function(value, metaData){
                return Ext.Date.format(value, 'h:i A');
            }
            },{
                xtype: 'numberfield',
                fieldLabel: 'OUT TIME',
                name: 'outtime',
                renderer: function(value, metaData){
                return Ext.Date.format(value, 'h:i A');
            }
            }
            ]
        }
        ];
        this.buttons = [
        {
            text: 'Save',
            action: 'save'
        },
        {
            text: 'Cancel',
            scope: this,
            handler: this.close
        }
        ];
        this.callParent(arguments);
    }
});

And the controller where I am calling this window on double click in grid row is given below :

Ext.define('Ext4Example.controller.Attendences', {
    extend: 'Ext.app.Controller',
    stores: [
    'Attendences','Months'
    ],
    models: [
    'Attendence','Month'
    ],
    views: [
    'attendence.Timeperiod','attendence.Details','attendence.Attendencewindow','attendence.Editattendence','attendence.Datagrid'  //'attendence.Months'
    ],

    refs: [{
        ref: 'stockaddForm',
        selector: 'form'
    }],

    init: function () {
        this.control({
            'datagrid': {
                itemdblclick: this.editUser,
                viewready: this.attnready
            },
            'attendencewindow button[action=save]': {
                click: this.save
            }       
        });
    },

    editUser: function(grid, record){
        var view = Ext.widget('editattendence');
        view.down('form').loadRecord(record);
    },
    save: function(){
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();     //+1
        Ext.Msg.alert("Today is - ",dd+" - "+mm+" - "+yyyy);
    },
    attnready: function(grid, eOpts) {       
        console.log('hello');
        var store = grid.getStore(),
        selModel = grid.getSelectionModel();
          if (store.getAt(0)) {
            selModel.select(0);
        }
    }
});

Answer 1

Hey I have solve this problem. Just a little bit of change in the editAttendence form as follows :

Ext.define('Ext4Example.view.attendence.Editattendence' ,{
    extend: 'Ext.window.Window',
    alias : 'widget.editattendence',
    title: 'Edit Attendence',
    layout: 'fit',
    autoShow: true,
    initComponent: function () {
        this.items = [
        {
            xtype: 'form',

            bodyStyle: {
                background: 'none',
                padding: '10px',
                border: '0'
            },
            items: [
            {
                xtype: 'datefield',
                name: 'id',
                allowBlank: false,
                fieldLabel: 'Attendene ID'
            },
            {
                xtype: 'datefield',
                format:'h:i A',
                name: 'intime',
                allowBlank: false,
                fieldLabel: 'IN TIME'

            },{
                xtype: 'datefield',
                format:'h:i A',
                fieldLabel: 'OUT TIME',
                allowBlank: false,
                name: 'outtime'

            }
            ]
        }
        ];
        this.buttons = [
        {
            text: 'Save',
            action: 'save'
        },
        {
            text: 'Cancel',
            scope: this,
            handler: this.close
        }
        ];
        this.callParent(arguments);
    }
});