Datefield in context menu

[zergius]

In my app I have grid with some data and need to set date to many records at once. But when i put datefield into menu, datepicker refuses to work - menu hides quicker then new value set. To workaround this i had to use such code:

showContextMenu =  function(view, record, item, index, event, options){
	function setDateValue(value){
		var selected = view.getSelectionModel().getSelection();
		for(var i = 0, li = selected.length; i<li; i++){
			selected[i].set('dat_expire',value);
		}
		store.sync();
		menu.hide();
	}
	var store = view.getStore();
	var menu = Ext.create('Ext.menu.Menu', {
		renderTo: Ext.getBody(),
		items: [{
			xtype: 'datefield',
			format: 'd.m.Y',
			submitFormat: 'Y-m-d',
			startDay: 1,
			hideLabel: true,
			enableKeyEvents: true,
			name: 'dat_expire',
			emptyText:'Set Expire',
			listeners:{
				select:function(field,value){
					setDateValue(value);
				},
				expand:function(){
					menu.suspendEvents();
				},
				collapse:function(){
					menu.resumeEvents();
				},
				keyup:function(field,e){
					if(e.keyCode == 13 || e.keyCode == 10){
						setDateValue(field.getValue());
					}
				}
			}
		}]
	});
	menu.showAt(event.xy);
	event.preventDefault();
}

It's work as planned, but may be someone help me to find better solution?

[scottmartin]

I do not see this behavior:

Ext.onReady(function(){

    Ext.QuickTips.init();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ];

    Company = Ext.extend(Ext.data.Model, {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        idProperty: 'company'
    });

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: Company,
        data: myData
    });

    menuContext = new Ext.menu.Menu({
        items: [
        {
            xtype: 'datefield'
        },
        {
            text: 'Do something'
        },
        {
            xtype: 'datepicker'
        }
        ],
        listeners: {
            itemclick: function(item) {
                // handle click
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        selModel: {
            selType: 'cellmodel'
        },

        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: Ext.getBody(),
        viewConfig: {
            stripeRows: true,
               listeners: {
                    itemcontextmenu: function(view, rec, node, index, e) {
                        e.stopEvent();
                        menuContext.showAt(e.getXY());
                        return false;
                    }
            }
        }
    });
});

Scott.

[zergius]

Thanks for response.
May be it's because you created menu only once or not specify renderTo: Ext.getBody() for that menu?