PDA

View Full Version : My TreePanel rendering problem in IE



lucarossi
19 Jul 2012, 6:21 AM
Hi all,

i have to do a porting of an application from extjs2.3 to extjs4.1.
I tested all the application with firefox and firebug and is all always fine, but not in IE8: the tree is rendering well but when click to expand a node all the tree present problem in the expansion. The problem is that the child start expanding from the father and not under it: this cause a re-alignment of the entire tree.
Can anyone help me?

Model:


Ext.define('Node',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'action', type: 'string'}
]
});

The treeStore:


treeStore = Ext.create('Ext.data.TreeStore', {
model: 'Node',
root: {expanded: true,children: []},
noCache:false
});

the tree:


menuTree = Ext.create('Ext.tree.Panel',{
id:'main-menu-frammenti',
rootVisible:false,
title:'<fmt:message key="menu.title"/>',
store: treeStore,
region:'west',
lines:false,
width: 200,
minSize: 150,
maxSize: 300,
collapsible:true,
animate:true,
setLoading:false,
bodyBorder: false,
border: false
});

for insert Node and thei child in the tree i for example use this code:


var root = tree.getRootNode();

var nodeTestMain = Ext.create('Node', {text:'<fmt:message key="test.title"/>', iconCls:'mf_menu_icon', leaf:false});

nodeTestMain.appendChild([
Ext.create('Node', {text:'GridTest', iconCls:'swd_menu_icon', action:'<c:url value="/GridTest.action"/>', leaf:true}),
Ext.create('Node', {text:'EditGrid-Test', iconCls:'user_menu_icon', action:'<c:url value="/EditGridTest.action"/>', leaf:true}),
Ext.create('Node', {text:'GridTest4', iconCls:'user_menu_icon', action:'<c:url value="/GridTest4.action"/>', leaf:true}),
Ext.create('Node', {text:'Test4', iconCls:'user_menu_icon', action:'<c:url value="/frammenti.action"/>', leaf:true})
]);

I also use a viewport for render all the app:


viewport = Ext.create('Ext.Viewport',{
id:'main-frammenti',
layout: 'border',
items:[

menuTree // west
]
});

Thanks for any type of help.

P.S. Sorry for my English.

scottmartin
19 Jul 2012, 10:28 AM
Do you see this problem in any of our online examples? I do not recall seeing any reports of this, so we will need a small working example with static data (array/json) that we can use to duplicate this problem.

I suspect it may be in your node creation methods.

Regards,
Scott.

lucarossi
19 Jul 2012, 11:37 PM
Hi Scott,
no i dont see this problem with your example. I see the problem only in my application.

I suspect it may be in your node creation methods.

What can i change in this creation methods, and why there is no problem in chrome and firefox?

Thanks

scottmartin
20 Jul 2012, 6:35 AM
Not all browsers are alike .. IE8 is also a bit older.. I would suspect IE9 is fine, and that your FF/Chrome are close to the latest versions?

Scott.

lucarossi
23 Jul 2012, 12:41 AM
Hi Scott,
I use FF 14.0.1 and the last release of Google Chrome. I use this two browser only for testing application, but my application need to run in IE8. I replay the example and i see perhaps the problem:
there isn't any sample provided with inline data for the the TreeStore, i going to test my application using a json file where i put the tree and change the treeStore..
For you is a waste of time?

lucarossi
23 Jul 2012, 7:59 AM
Hi Scott,
I probably resolve the problem but i don't now why.
With extjs2 i don't use any Docktype statement at the top of the page, and is go alway fine. In extjs4.1 i need to put in the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Is this type necessary with the new release of the framework?

scottmartin
23 Jul 2012, 8:31 AM
It is good practice, especially in regards to IE, as you may be in a mode that causes problems and this forces the mode you require.

Scott.