Ext.namespace("Ext.ux.menu");

Ext.ux.menu.ActionButtonsItem = Ext.extend(Ext.menu.BaseItem, {
	itemCls : "x-menu-item",
    hideOnClick: false,
    actionItemContainer:null,
    events : {
    	'commit' : true,
    	'cancel' : true
    },
    initComponent: function(){
    	
    	this.okBtn = new Ext.Button({
    		text:'OK',autoWidth:false,flex:1
    	});
    	
    	this.okBtn.on('click', this.onButtonClick, this, {
			single: false,
			delay: 0
		});
    	
    	this.cancelBtn = new Ext.Button({
    		text:'Cancel',autoWidth:false,flex:1
    	});
    	
    	this.cancelBtn.on('click', this.onButtonClick, this, {
			single: false,
			delay: 0
		});
    	
    	this.actionItemContainer = new Ext.Container({
    		layout:'hbox',
    		padding:5,
    		boxMinWidth:200,
    		width: 'auto',
    		align:'stretch',
    		items: [
    		        this.okBtn,
    		        {xtype:'spacer',width:5},
    		        this.cancelBtn
		   ]
    	});
    	
    },
    
    onRender: function(container){
    	
        var s = container.createChild();
        this.actionItemContainer.render(s);
        this.el = s;
        
        //Ext.apply(this.config, {width: 125});	
        Ext.ux.menu.ActionButtonsItem.superclass.onRender.apply(this, arguments);
    },
    
    onButtonClick: function(b,e){
    	if (b == this.okBtn){
    		this.fireEvent("commit",this,b,e);
    	} else if (b == this.cancelBtn){
    		this.fireEvent("cancel",this,b,e);
    	}
    }
});