PDA

View Full Version : TabPanel in Window to load a different component - and resize it correctly



peanutmedia
25 Jul 2010, 1:45 AM
Hello Everyone,

I'm having the following problem:

I'm working on a simple admin interface where I'd like to display separate admin pages (users, content, etc) in different tabs in a window. For this purpose I have a window component created, with borderlayout. The center region of this layout contains a TabPanel component. Inside this component there are no tabs when I first run the program, I'm adding a separate Ext Designer component when the window is created (later this will be moved to the appropriate event handler).


WindowAdminUi = Ext.extend(Ext.Window, {
title: 'Admin',
width: 672,
height: 412,
layout: 'border',
constrainHeader: true,
initComponent: function() {
this.items = [
{
xtype: 'tabpanel',
activeTab: 0,
region: 'center',
itemId: 'pagetabs',
deferredRender: false,
layoutOnTabChange: true,
resizeTabs: true
}
];
WindowAdminUi.superclass.initComponent.call(this);
}
});

The component I'd like to load in the tabs is the following:


PanelAdminUi = Ext.extend(Ext.Panel, {
title: '',
width: 500,
height: 300,
border: false,
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: '',
region: 'center',
border: false,
padding: 5,
html: '',
autoScroll: true,
ref: 'testpanel'
},
{
xtype: 'form',
title: 'Control',
region: 'south',
height: 160,
width: 596,
padding: 5,
url: 'index.php',
itemId: 'frmControl',
items: [
{
xtype: 'textarea',
anchor: '100%',
fieldLabel: 'Note',
height: 80,
name: 'taNote',
enableKeyEvents: true,
itemId: 'taNote'
}
],
fbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Save',
width: 100,
itemId: 'btnSave'
}
]
}
}
];
PanelAdminUi.superclass.initComponent.call(this);
}
});


I have set widths and heights because if I don't, the panel shrinks to 0 height in the designer, rendering it invisible.

The WindowAdmin.js file contains the following:

WindowAdmin = Ext.extend(WindowAdminUi, {
initComponent: function() {
WindowAdmin.superclass.initComponent.call(this);
var pagetabs = this.getComponent("pagetabs");
var panel_id = "8438934893093fdfd"; // dummy session id for testing
var cwtab = new PanelAdmin({id:panel_id,height:199,width:200}); // This option works fine, sets the height of the width of the panel correctly
var cwtab2 = new PanelAdmin({id:panel_id}); // This also works, sets the width and height of the component to the one set up in the PanelAdminUi file (500x300)
// NOTE: I'm trying to fetch the height of the tabbed panel here, the following commands generates an error which says roomtabs doesn't have a method called
// getComputedHeight, but it should, as it's a TabPanel, which extends Component!
alert(pagetabs.getComputedHeight());
// The error message from Chrome: "Uncaught TypeError: Object [object Object] has no method 'getComputedHeight'"
// YET! If I comment out the command above and run the following:
alert(pagetabs.getXType());
// The alertbox pops up just fine, saying "tabpanel"
var cwtab3 = new PanelAdmin({id:panel_id}); // This also works, sets the width and height of the component to the one set up in the PanelAdminUi file (500x300)
pagetabs.add({title:"Users"}).show();
pagetabs.getItem(0).add(cwtab);
pagetabs.getItem(0).doLayout();
}
});

My question is, how can I ensure that the PanelAdmin component, when it's created, fills out the available space? Is it possible to set the height explicitly or even better, to make sure the layout manager takes care of sizing it to 100% width and height inside the tab panel?

Thanks for your help, and sorry for the lengthy post, I wanted to ensure I include every possible information I had.

j-joey
25 Jul 2010, 8:21 AM
a fit layout will be enough:



//...
roomtabs.add({title:'Users', layout:'fit' }).show();
//...


and you can put your Users, Content etc tabs in design time and set their autoRef properties to access them easily.

And one more thing, if you'll add only one panel to tabs of your tabpanel, you can directly add your panels as tabs.

peanutmedia
26 Jul 2010, 3:49 AM
Thank you, it works like a charm!