My TreePanel rendering problem in IE

[lucarossi]

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]

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]

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]

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]

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]

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]

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.