You need to put all your code inside Ext.application...
and launch:function(){...}...
. Your code is working fine. See demonstration here.
But then again, buttonContainer
is not really being added to any tab panel. If you change the tab, you can see buttonContainer
is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false
to you buttonContainer
panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present
tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer
is added as an item inside present
tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.