PDA

View Full Version : problem with tabPanel



jaro88
18 Jan 2010, 2:48 AM
I have a problem with a tabPanel. I'm adding a new tab with a grid inside by clicking on a button. And this is working fine but when I'm closing a tab and trying to add it again the tab will add but the content is empty, and i'm getting the error:

c.getPositionEl().dom is undefined
http://localhost/~EXT/ext-3.1.0/ext-all-debug.js (http://localhost/%7EEXT/ext-3.1.0/ext-all-debug.js)
row: 11742

Here is the code


//My store manager

var magazyn_aplet = new Ext.data.Store({
storeId: 'aplet',
url: 'tematy.xml',
autoLoad: true,
reader: new Ext.data.XmlReader({
record: 'position'},
['description','points', 'type']),
//idIndex: 0

});

//Grid

var grid_aplet = new Ext.grid.GridPanel({
store: magazyn_aplet,
border: false,

height: 350,
columns: [new Ext. grid.RowNumberer({width: 30}),
{id:'description',header: "Opis", width: 30, sortable: true, dataIndex: 'description'},
{header: "Punkty",width: 75, sortable: true, dataIndex:'points'},
{header: "Typ",width: 75, sortable: false, dataIndex:'type'},
],
autoExpandColumn: 'description'
}
);

//Button for call the function which adding the new TAB
var ApletButton = new Ext.Button({
text: 'Aplet',
handler: aplet,
iconCls:'new-tab',
width: 118,
renderTo: 'button1'
});


//My tab panel
var tab = new Ext.TabPanel({
renderTo: 'content',
width:1140,
height:380,
enableTabScroll:true,
autoScroll: true,
autoTabs: true
});

//Function which adding the new Tab

var zak2=0;
function aplet(tabTitle, targetUrl){
if (zak2 ==0){
tab.add({
title: 'Aplet',
iconCls: 'tabs',
closable: true,
itemId: 'tab2',
listeners:{activate: activate_aplet,
deactivate: deactivated_aplet, beforeclose: beforeclose_aplet},
autoScroll: true,
items: grid_aplet
}).show();
zak2=1;
}
else if (zak2==1){
tab.activate('tab2');
}
};

I would like to apologise for my poor English

I 'm attached an images showing my problem

Thanks for any response.

http://img23.imageshack.us/img23/7345/tabpanel1.jpg

http://img163.imageshack.us/img163/1580/tabpanelerror.jpg

Hollywood
18 Jan 2010, 2:58 AM
//Function which adding the new Tab

var zak2=0;
function aplet(tabTitle, targetUrl){
if (zak2 ==0){
tab.add({
title: 'Aplet',
iconCls: 'tabs',
closable: true,
itemId: 'tab2',
listeners:{activate: activate_aplet,
deactivate: deactivated_aplet, beforeclose: beforeclose_aplet},
autoScroll: true,
items: new Ext.grid.GridPanel({



store: magazyn_aplet,
border: false,

height: 350,
columns: [new Ext. grid.RowNumberer({width: 30}),
{id:'description',header: "Opis", width: 30, sortable: true, dataIndex: 'description'},
{header: "Punkty",width: 75, sortable: true, dataIndex:'points'},
{header: "Typ",width: 75, sortable: false, dataIndex:'type'},
],
autoExpandColumn: 'description'
}
);

}).show();
zak2=1;
}
else if (zak2==1){
tab.activate('tab2');
}
};



when you close the tab, the child components (in this case the grid gets destroyed).you need to this create the grid at the place where you create the tab.

jaro88
18 Jan 2010, 6:17 AM
Thanks a lot, now it's working;)

Hollywood
18 Jan 2010, 11:49 PM
You are welcome ))

Regards,

Hw

brizardh
4 Feb 2010, 3:48 PM
What if you cant do new Ext.Panel directly and you need to pass an already existing panel... is there any ways you can make it work the way jaro88 wrote his code initially (with the var grid outside) ???