Sencha Touch - How function work?

I have code as follow -

/ Project Button
var btnProject = new Ext.Button({
text: 'Project',
handler: ProjectList

});



// Function - ProjectList
var ProjectList = function (botton, event) {

....

}

// Function - closeList
var closeList = function (botton, event) {

....

}


My Question is -
is there any option, when I click first time on"btnProject", the "ProjectList" will be called and next time "CloseList" will be called?

No, but you could simulate it pretty easily:

Code:

---

var close = true;
new Ext.Button({
    handler: function(btn){
        close = !close;
        if(close){
            closeList.apply(btn, arguments);
        }else{
            ProjectList.apply(btn, arguments);
        }
    }
});

---

Thanks for your replay. I have totally understood your coding. But I need more help to solve my problem. I have following function. When I click on Project button, it is displaying list of information. How can I close this list when I click next time?

// Function - ProjectList
var ProjectList = function (botton, event) {


Ext.regModel('Project', {
fields: ['ProjctName', 'ProjectNumber']
});

var groupingBase = {
tpl: '<tpl for="."><div class="project"><strong>{ProjectNumber}</strong> {ProjctName}</div></tpl>',
itemSelector: 'div.project',

singleSelect: true,
grouped: true,
indexBar: true,

store: new Ext.data.Store({
model: 'Project',
sorters: 'ProjctName',

getGroupString: function (record) {
return record.get('ProjctName')[0];
},

data: [
{ ProjectNumber: '20100003', ProjctName: 'Unversity of Queensland' },
{ ProjectNumber: '20100010', ProjctName: 'Unversity Project 01' },
{ ProjectNumber: '20100011', ProjctName: 'Unversity Project 02' },
{ ProjectNumber: '20900001', ProjctName: 'Old Windsor Rd Bus Shelter' },
{ ProjectNumber: '20100001', ProjctName: 'Bedrok Park Landscape' },
{ ProjectNumber: '20100005', ProjctName: 'Project 01' },
{ ProjectNumber: '20100006', ProjctName: 'Project 02' },
{ ProjectNumber: '20100007', ProjctName: 'Project 03' },

]
})
};

new Ext.List(Ext.apply(groupingBase, {
fullscreen: true

}))
}

What do you mean by "close"?

Code:

---

Ext.setup({
    onReady: function(){
        var main = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            items: [{
                html: 'Initial Card',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Show list',
                        handler: function(){
                            main.setCard(1);
                        }
                    }]
                }]
            }, {
                html: 'List Card',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Show main',
                        handler: function(){
                            main.setCard(0);
                        }
                    }]
                }]
            }]
        });
    }
});

---

When I click on "Project" button, it will show list of projects. But next time click, it should be hide the frame. May be display another frame.