PDA

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



njguard
17 Jan 2011, 8:32 AM
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.

jep
17 Jan 2011, 9:29 AM
Can you post the full working source for your example, at the very least including everything in the Ext.setup function? We might be more likely to be able to help. At first glance, my guess is that getPositionEl() is not returning anything. But I'm not even sure where getPositionEl() is coming from.

njguard
17 Jan 2011, 4:28 PM
Thanks.
This is west panel code.

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;
};
And I have some buttons in north Region.
For example,when I click this button.

{
pressed:false,
text:'????',
iconCls: 'btn-people',
handler:function(){
leftMenu.removeAll();
leftMenu.items.addAll(items2);
leftMenu.doLayout(true);
}
},
the first click is OK,but the second will warning 'getPositionEl().dom.parentNode' is null or not an object.

Here is all of the 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);

njguard
17 Jan 2011, 4:40 PM
Thanks,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?

njguard
17 Jan 2011, 4:51 PM
Thanks,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);
}
},{
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?