Hi Everyone,
I've taken the form example available on github (https://github.com/senchalearn/Forms-demo) as a start point for an example app that I'm working on.
The example is a listview with a button for adding a new item, and the corresponding form.
I want to have the same two cards but inside a tab panel container, so one of the tabs holds (listview, new button, form) and other tabs show other components.
What I'm trying to do is fairly simple but i'm running into some errors; dealing with the config options of layout, fullscreen and the setActiveItem method.
The error i'm getting is:
Uncaught TypeError: Object card has no method 'setActiveItem'
Here's my tab container code :
Code:
App.views.Main = Ext.extend(Ext.TabPanel, {
fullscreen: true,
type: 'dark',
initComponent: function() {
Ext.apply(this, {
items: [{
title: 'Users',
xtype: 'UserCardsContainer' ,
iconCls: 'info',
}, {
title: 'Other',
xtype: 'sample' ,
iconCls: 'info',
},],
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
});
App.views.Main.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('Main', App.views.Main);
And UserCardContainer:
Code:
App.views.UserCardsContainer = Ext.extend(Ext.Panel, {
layout: 'card',
initComponent: function() {
Ext.apply(this, {
items: [
{ xtype: 'App.views.UsersList', id: 'usersList' },
{ xtype: 'App.views.UsersForm', id: 'usersForm' },
],
});
App.views.UserCardsContainer.superclass.initComponent.apply(this, arguments);
},
reveal: function(target) {
var direction = (target === 'usersList') ? 'right' : 'left'
this.setActiveItem(
App.views[target],
{ type: 'slide', direction: direction }
);
}
});
Ext.reg('UserCardsContainer', App.views.UserCardsContainer);
And, just to point out that the scope of the newForm button is correct, here is the button definition on the panel (userList) that holds the button:
Code:
addButton = {
itemId: 'addButton',
iconCls: 'add',
iconMask: true,
ui: 'plain',
handler: this.onAddAction,
scope: this
};
I've tried changing the method to setCard (as suggested on some other posts) and didn't seem to make the trick :
Uncaught TypeError: Object [object Object] has no method 'setCard'
So, i'm a bit lost why the method setActiveItem is defined for the panel, only if the panel is not included on a tabPanel..... am I missing something?
Been stuck with this for a while, thanks in advance!