PDA

View Full Version : A problem of remove and doLayout().



njguard
17 Jan 2011, 4:46 PM
Hi,today I got a problem,I remove some items from a panel,but when I want to add the removed item?an error happened:'getPositionEl().dom.parentNode' is null or not an object. Thanks to tell me how should I do.
Here is my all code.

Ext.ns('App');

var leftMenu="";
var mainPanel="";
var viewport="";

var items1=[];
var control = new Ext.tree.TreePanel({
title: '???1',
id:'control1',
border: false,
iconCls: 'nav',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/tree.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(control, e) {
App.mainPanel.openTab(control);
}
}
});
var system=new Ext.tree.TreePanel({
title: '????1',
id:'system1',
border: false,
iconCls: 'settings',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/system.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(node, e) {
App.mainPanel.openTab(node);
}
}
});
items1=[control,system];

var items2=[];
var control2 = new Ext.tree.TreePanel({
title: '???2',
id:'control2',
border: false,
iconCls: 'nav',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/tree2.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(control, e) {
App.mainPanel.openTab(control);
}
}
});
var system2=new Ext.tree.TreePanel({
title: '????2',
id:'system2',
border: false,
iconCls: 'settings',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/system2.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(node, e) {
App.mainPanel.openTab(node);
}
}
});
items2=[control2,system2];

var items3=[];
var control3 = new Ext.tree.TreePanel({
title: '???3',
id:'control3',
border: false,
iconCls: 'nav',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/tree3.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(control, e) {
App.mainPanel.openTab(control);
}
}
});
var system3=new Ext.tree.TreePanel({
title: '????3',
id:'system3',
border: false,
iconCls: 'settings',
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.tree.TreeLoader({
url: 'data/system3.txt',
requestMethod: 'GET'
}),
listeners: {
click: function(node, e) {
App.mainPanel.openTab(node);
}
}
});
items3=[control3,system3];

App.createNorth = function() {
var northRegion = new Ext.Panel({
region:'north',
el:'header',
height:70,
border:false,
frame:false,
margins:'5 5 5 5',
style:'border:0px;',
html:"<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" background=\"images/topbg.jpg\"><tr><td><img alt=\"logo\" src=\"scripts/ext/resources/images/log-line.gif\" /></td></tr></table>",
bbar:[
{
pressed:false,
text:'????',
iconCls: 'btn-people',
handler:function(){
//leftMenu.removeAll();
//leftMenu.items.addAll(items2);
//leftMenu.doLayout(true);
leftMenu.destroy();
leftMenu=new Ext.Panel({
region: 'west',
title: '????',
split: true,
width: 200,
minSize: 150,
maxSize: 240,
collapsible: true,
collapseMode:'mini',
margins: '0 0 0 5',
layout: 'accordion',
layoutConfig: {
animate: true
},
items: items2
});
viewport.add('west', new Ext.ContentPanel(leftMenu, {autoCreate:true}));
leftMenu.render(viewport.getRegion("west").bodyEl);
}
},{
xtype:'tbseparator'
},{
pressed:false,
text:'????',
iconCls: 'btn-table',
handler: function(){
alert('??function');
}
},{
xtype:'tbseparator'
},{
pressed:false,
text:'????',
iconCls: 'btn-word',
handler: function(){
alert('??function');
}
},{
xtype:'tbseparator'
},{
pressed:false,
text:'??????',
iconCls: 'btn-safe',
handler: function(){
alert('??function');
}
},{
xtype:'tbseparator'
},{
pressed:false,
text:'????',
iconCls: 'btn-log',
handler: function(){
alert('??function');
}
},{
xtype:'tbseparator'
},{
pressed:false,
text:'????',
iconCls: 'btn-money',
handler: function(){
alert('??function');
}
},{
xtype:"tbfill"
},{
pressed:false,
text:'?????',
iconCls: 'btn-refresh',
handler : function(btn, e) {
var tab = mainPanel.getActiveTab();
tab.removeAll(true);
tab.getUpdater().refresh();
}
},{
pressed:false,
text:'????',
iconCls: 'btn-close',
handler : function(btn, e) {
mainPanel.items.each(function(item) {
if (item.closable) {
mainPanel.remove(item, true);
}
})
}
},{
pressed:false,
text:'??',
iconCls: 'btn-logout',
handler: function(){
Ext.Msg.confirm('??','?????',function(btn){
if(btn=='yes'){
window.close();
}
});
}
}
]
});
return northRegion;
};

App.createWest = function() {

leftMenu=new Ext.Panel({
region: 'west',
id:'addpanelId',
title: '????',
split: true,
width: 200,
minSize: 150,
maxSize: 240,
collapsible: true,
collapseMode:'mini',
margins: '0 0 0 5',
layout: 'accordion',
layoutConfig: {
animate: true
},
items: items1
});
return leftMenu;
};

App.createBottom=function() {
return new Ext.BoxComponent({region:'south', el:'footer', height:30});
};

App.createCenter = function() {
mainPanel = new Ext.TabPanel({
id: 'main-tabs',
activeTab: 0,
region: 'center',
margins: '0 5 5 0',
resizeTabs: true,
tabWidth: 100,
minTabWidth: 60,
enableTabScroll: true,
items: [{
id: 'main-view',
layout: 'fit',
title: '????',
closable: false,
hideMode: 'offsets',
html: "????????"
}]
});

mainPanel.openTab = function(node) {
var id = node.attributes.id;
var newTab = false;
var tab = this.getItem(id);
if (!tab) {
tab = new Ext.Panel({
id: id,
title: node.text,
tabTip: node.text,
layout: 'fit',
html: '????...',
closable: true,
autoScroll: true,
border: true
});
this.add(tab);
newTab = true;
}
this.setActiveTab(tab);

if (newTab) {
if (App[id]) {
App[id].render(id);
this.doLayout();
} else {
Ext.Ajax.request({
panelId: id,
url: 'scripts/modules/' + id + '.js',
success: function(response, opts) {
var o = eval(response.responseText);
if (o) {
App[id].render(opts.panelId);
this.doLayout();
}
},
failure: function() {
Ext.Msg.alert("??","???????");
},
scope: this
});
}
}
};

App.mainPanel = mainPanel;
return mainPanel;
};

App.createViewport = function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [
App.createNorth(),
App.createWest(),
App.createCenter(),
App.createBottom()
]
});
};

App.initMain = function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.Msg.minWidth = 300;

App.createViewport();

setTimeout(function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({ remove: true });
}, 250);
};

Ext.onReady(App.initMain);

I have some buttons in north region,I want to click the north region buttons to change menu in west region. The problem is when I click button, run
leftMenu.removeAll();
leftMenu.items.addAll(items3);
leftMenu.doLayout(); to remove LeftMenu's items and add new items,the first click is OK,but the second will warning "'getPositionEl().dom.parentNode' is null or not an object".

Or is anybody has a better method to accomplish this operation?Thanks

Condor
18 Jan 2011, 12:47 AM
Removing items will destroy them, so you can't use them again.

Instead, make your leftMenu a layout:'card' and add all items. Next, you only have to call leftMenu.layout.setActiveItem(x) to select the appropriate card.

njguard
18 Jan 2011, 1:29 AM
Thank you?Now I have solved this problem,I put the change panel in a parent panel,then put the parent penel in west region.