PDA

View Full Version : [CLOSED]Extjs 3.0 tree's right-menu (contextmenu) Bug



oxygen
5 Nov 2009, 9:13 PM
Ext version tested:


Ext 3.00



Adapter used:


ext
yui
jquery
prototype



css used:


only default ext-all.css
ColumnNodeUI.css





Browser versions tested against:


IE8
FF3 (firebug 1.4.0.10 installed)
Chrome



Operating System:


Windows 7



Description:


When i use a panel component to auto-load a page including extjs tree ,I find it not work ok with the tree right menu. The duplicate menu content be shown between times.
so, i test a page ,it import *.js, *.css itself ,instead of be loading by a panel auto-load function. it work ok . and i test it in extjs 2.3, two cases all be fine. so i think extjs 3.0.0 has this bug.



Test Case:

function(){
workPanel.getUpdater().update({
url:'/product/productsList',
scope: this,
scripts:true,
discardUrl:true,
nocache:true,
text:"loading..."
});
}
FYI: productsList include extjs tree component.

See this URL : http://


Steps to reproduce the problem:


foo
bar



The result that was expected:


foo
bar



The result that occurs instead:


foo
bar



Screenshot or Video:


attached



Debugging already done:


none



Possible fix:
not provided

evant
5 Nov 2009, 10:19 PM
That's not a valid test case, it can't be run locally.

Please provide a reproducible test case.

oxygen
5 Nov 2009, 10:33 PM
It's not only for ColumnTree, also for normal tree. !
The important is a page including tree component be load by a panel auto-load function ,not itself.

1. make a panel
var actionPanel = new Ext.Panel({
id:'action-panel',
split:true,
collapsible: true,
collapseMode: 'mini',
width:150,
minWidth: 150,
border: false,
baseCls:'x-plain'
});

2.load page from this panel
workPanel.setTitle("product setup");
workPanel.getUpdater().update({
url:'/product/productsList',
scope: this,
scripts:true,
discardUrl:true,
nocache:true,
text:"loading..."
});

3.some code in productsList
first. define a tree
var tree = new Ext.ux.tree.ColumnTree({
width: 500,
height: 460,
rootVisible:false,
autoScroll:true,
title: 'Products',
renderTo: 'products_tree_div',
columns:[{
header:'id',
width:330,
dataIndex:'id'
},{
header:'spec',
width:100,
dataIndex:'spec'
},{
header:'unit_price',
width:100,
dataIndex:'unit_price'
},{
header:'quantity',
width:100,
dataIndex:'quantity'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'/test/getTreeData',
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
id:0,
text:'Products'
})..........................
second. give it a right menu
tree.on("contextmenu",function(node,e){
e.preventDefault();
productRightMenu.showAt(e.getXY());
node.select();
});

var productRightMenu = new Ext.menu.Menu({
id: 'product_right_menu',
items: [
new Ext.menu.Item({
text: 'refresh',
handler: rightMenuProductTreeFn
})]
}) ............

function rightMenuProductTreeFn(){........}

evant
5 Nov 2009, 10:46 PM
This isn't an Ext bug, I'd suggest you post a similar question in the help forum, I'm not able to reproduce it.

Marking as closed.

oxygen
5 Nov 2009, 11:04 PM
This isn't an Ext bug, I'd suggest you post a similar question in the help forum, I'm not able to reproduce it.

Marking as closed.


I do not post it in any other forum.
oh...... yes, i post it to wrong forum. i don't find last one ,thinking admin delete it for bad format context. so i write a correctly format post.


But why same code work ok in extjs 2.3?

Condor
6 Nov 2009, 1:08 AM
It is not recommended to use autoLoad to load Ext components, because it's hard to destroy the correct components before the page is reloaded.

That's exactly the problem you are having here: The tree and menu you create the first time aren't destroyed when you load the page again and the items from the first menu will also become part of the second menu (because they have the same id).

I recommend using LiteRemoteComponent (http://www.extjs.com/forum/showthread.php?t=18023) instead.

oxygen
6 Nov 2009, 1:24 AM
It is not recommended to use autoLoad to load Ext component, because it's hard to destroy the correct components before the page is reloaded.

That's exactly the problem you are having here: The tree and menu you create the first time aren't destroyed when you load the page again and the items from the first menu will also become part of the second menu (because they have the same id).

I recommend using LiteRemoteComponent (http://www.extjs.com/forum/showthread.php?t=18023) instead.

thank you!!

But i just make a component in the page be loaded by panel throught "panel.getUpdater().update"
And i setup panel cache = nocache.
nocache, nocache option will use old object also?

Condor
6 Nov 2009, 1:37 AM
'nocache' specifies that it should request new data from the server and not from the browser cache.

This option has nothing to do with the fact that any components that were rendered inside the workPanel aren't destroyed when the content is replaced.
If the components were added instead of rendered the container would take care of cleaning them up (that's what LiteRemoteComponent does).
But since you rendered the components you are responsible for destroying them yourself if you plan to replace them (e.g. when loading the panel again).

oxygen
8 Nov 2009, 6:17 AM
'nocache' specifies that it should request new data from the server and not from the browser cache.

This option has nothing to do with the fact that any components that were rendered inside the workPanel aren't destroyed when the content is replaced.
If the components were added instead of rendered the container would take care of cleaning them up (that's what LiteRemoteComponent does).
But since you rendered the components you are responsible for destroying them yourself if you plan to replace them (e.g. when loading the panel again).

i load a page include tree's context menu ,it is not work ok ,dump menu content between times.
but i load a page include grid's context menu,it is work fine.