<script src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/multiselectpanel/ext.ux.multiselectpanel.js" type="text/javascript"></script>

	
Ext.application({
    launch:function(){
        var userSelectionPanel = Ext.Viewport.add({
            xtype:'multiselectpanel',
            hideOnMaskTap: false,
            modal:true,
            centered: true,
            title:'Send email to:',
            autoSelect:false,
            hidden:true,
            doneButtonText:'Push',
            //store:{xtype:'store-members'},
            valueField:'value',
            displayField:'text',
            //hideOnDone:false,
            //hideCloseButton:true,
            options: [
                {text: 'Surinder', value: '1'},
                {text: 'Mattoo', value: '2'},
                {text: 'Tiddu', value: '3'},
                {text: 'John', value: '4'}
            ],
            listeners:{
                done:function(selectionPanel, value){
                    if(value==''){
                        Ext.Msg.alert('Please select any user.');
                    }else{
                        Ext.Msg.alert('Send emails to:'+value);
                    }
                }
            }
            /*bottomToolbar:{
                //hidden:true,
                xtype:'button',
                text:'Done'
            }*/
        });

        Ext.Viewport.add({
            xtype:'panel',
            activeItem:0,
            layout:{
                type:'card',
                animation:{
                    type:'slide', 
                    duration:1000, 
                    direction:'right'
                }
            },
            ref:'cardpanel',
            items:[{
                layout:{
                    type:'vbox',
                    align:'center',
                    pack:'center'
                },
                defaults:{
                    xtype:'button',
                    margin:'20 10'
                },
                items:[{
                    text:'Send emails to:',
                    handler:function(){
                        userSelectionPanel.show();
                    }
                },{
                    text:'Select user from next card:',
                    handler:function(){
                        this.up('[ref="cardpanel"]').getLayout().setAnimation({type:'slide', duration:1000, direction:'left'});
                        this.up('[ref="cardpanel"]').setActiveItem(1);
                    }
                }]
            },{
                //multi select panel as card item
                xtype:'multiselectpanel',
                title:'Send email to:',
                autoSelect:false,
                doneButtonCfg:{text:'Email'},
                //store:{xtype:'store-members'},
                valueField:'value',
                displayField:'text',
                hideCloseButton:true,
                hideOnDone:false,
                options: [
                    {text: 'Surinder [id:1]', value: '1'},
                    {text: 'Mattoo [id:2]', value: '2'},
                    {text: 'Tiddu [id:3]', value: '3'},
                    {text: 'John [id:4]', value: '4'}
                ],
                listeners:{
                    /*beforehide:function(){
                        return false;
                    },
                    */
                    done:function(selectionPanel, value){
                        if(value==''){
                            Ext.Msg.alert('Please select any user.');
                        }else{
                            Ext.Msg.alert('Send emails to:'+value);
                            this.up('[ref="cardpanel"]').getLayout().setAnimation({type:'slide', duration:1000, direction:'right'});
                            this.up('[ref="cardpanel"]').setActiveItem(0);
                        }
                    }
                }
            }]
        });
    }
});