how to add tab component

[eemerge]

Hello,
I am playing with the Complex Layout example,modifying and trying to learn how to use this. What im trying to do is:

having some buttons on the west panel, when i click one, i want to add a tab in the center panel.
i am using this code:


<ul>
<li onclick="test1();">Categorii
Subcategorii
Produse
Caracteristici produse
Clienti
Comenzi
[/list]

this is the 'menu' in the west panel.
test1 is a function , defined like this:



function test1()
{
layout.beginUpdate();
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.endUpdate();
}


i did a small modification, i declared the " var layout; " outside the function:



<script type="text/javascript">
//var mainLayout;
var layout;
Example = function(){

return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
......


When i click the 'button' inthe west panel, i get an error in FireBug (firefox)



this.dom has no properties
[Break on this error] this.addClass(className);return this;},removeClass:function(className){if(classN...


if anyone could help, would be appreciated.

Thanks.

[KimH]

If you have just started building applications using this API then you should switch to "Ext 1.0 alpha 3 rev. 4" instead and try from there... The documentation and examples in the download can show you what you need.

If you have build a complex masterpiece of an application using the 0.33 or 0.40 versions of Yui-Ext then you should immediately sit down and make a plan for migration to "Ext 1.0 alpha...". The version you are using has been deprecated!

[eemerge]

thanks for the tip, i switched to alpha

[JeffHowden]

In order for your code to work, an element with an id of "center1" must exist in the document somewhere. If it does not, you'll need to either add it to the HTML source or create it on the fly.

Additionally, since element ids must be unique, you will only be able to add the one panel with that id. If you need to add more than one, you may want to look into a more dynamic way of generating that id (and almost certainly look into creating the HTML on the fly).

[eemerge]

im trying now the following:

i commented the addition of the tab in the center that closes, but the markup in html exists. i have added in the west panel a div that should add the 'Close me' tab in the center panel, when clicked.

How do i get access to the "layout" variable so that i can use:

layout.add(....) ?

[gensisns]

eemerge,

Just spent like an hour trying to figure out the same thing you are trying to figure out. If sombody has a better solution, please let me know, but this seems to work. My problem was adding a grid, so you'll have to adapt a little, but to access the layout variable, I created a function in my layout class function to do what I wanted to do, and just called that from my other class:


addCenterGrid : function(grid)
{
layout.beginUpdate();
layout.add('center', new Ext.GridPanel(grid, {title: 'Title', closable: false}));
layout.endUpdate();
}

Hope this helps,
Michael

[eemerge]

Thanks for your reply, i'll try to use that , although i was trying to be able to access it from outside...but if its not possible, i'll stick to the way you did it.

[gensisns]

I think it will do what you want - modify the function to do what you want, and call the function from the outside (i.e. Example.addCenterGrid()) should work from anywhere.

Michael