1. #1
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default tree panel with accordion layout

    tree panel with accordion layout


    I'm making a menu with accordion layout and tree panel.
    If I use long title as tree node, FireFox can display it correctly, but IE8 can not.
    How can I correctly display it with IE8?

    FireFox:
    ss2.png

    IE8:
    ss1.png

    test code:
    Code:
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1//resources/css/ext-all.css" />
    
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1//adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1//ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
    	var viewport = new Ext.Viewport({
    		layout:'border',
    		items:[{	// header
    			html:'<h1 style="background-color:#ccccff;width:100%;height:100%">Header</h1>',
    			region:'north',
    			height:53
    		},{
    			region:'center',
    			layout:'border',
    			items:[{
    				region:'west',
    				width:150,
    				id: 'menu',
    				split:true,
    				layout:'accordion'
    			},{
    				region:'center',
    				html:'<h1>Main contents</h1>main contents...'
    			}]
    		}]
    	}); // end of viewport
    	var data = [{
    		text:'Menu1',menu:[{
    			text:'brunch11',menu:[
    				{text:'brunch111',menu:[
    					{text:'leef1111'},
    					{text:'leef1112'},
    					{text:'long long long title node 1113'}
    				]},
    				{text:'leef112'},
    				{text:'leef113'}
    			]
    		},{text:'brunch12',menu:[
    			{text:'leef121'},
    			{text:'leef122'}
    		]}]
    	},{
    		text:'Menu2',menu:[{
    			text:'brunch21',menu:[
    				{text:'brunch211',menu:[
    					{text:'leef2111'},
    					{text:'leef2112'},
    					{text:'long long long title node 2113'}
    				]},
    				{text:'leef212'},
    				{text:'leef213'}
    			]
    		},{text:'brunch22',menu:[
    			{text:'leef221'},
    			{text:'leef222'}
    		]}]
    	}];
    	for (var i=0,top; top=data[i]; ++i) {
    		// make TreePanels
    		var root = new Ext.tree.TreeNode({text:top.text});
    		//addNodes
    		(function(parent, childs) {
    			for (var i=0,cld; cld=childs[i]; ++i) {
    				// make node from childs[i]
    				var node = new Ext.tree.TreeNode({
    					text:cld.text,
    					leaf:!cld.menu
    				});
    				// add a node to parent
    				parent.appendChild(node);
    
    				// add child nodes if the node has child
    				if (cld.menu && cld.menu.length>0) {
    					arguments.callee(node, cld.menu);
    				}
    			}
    		})(root, top.menu); // call self recursive
    		var tp = new Ext.tree.TreePanel({
    			title:top.text,
    			rootVisible: false,
    			autoScroll: true,
    			containerScroll: true,
    			root: root
    		});
    		// add the node to tree
    		Ext.getCmp('menu').add(tp);
    	}
    	Ext.getCmp('menu').doLayout();
    }); // end of onReady
    </script>
    
    </head><body>
    </body></html>

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    try setting your doctype to strict.

  3. #3
    Sencha User mashiki's Avatar
    Join Date
    Oct 2007
    Location
    Japan
    Posts
    139
    Vote Rating
    0
    mashiki is on a distinguished road

      0  

    Default Now, run correctly.

    Now, run correctly.


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    try setting your doctype to strict.
    The script came to move correctly according to your instruction when strict was specified for doctype.

    Thank you.

Similar Threads

  1. Accordion Panel Layout
    By iteamsoftware in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 1 Nov 2010, 10:14 AM
  2. rendering of expanded nodes with accordion panel/tree panel
    By jadrake75 in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 15 Jul 2010, 7:38 AM
  3. Accordion layout nested like a tree structure
    By hu97224 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Feb 2010, 9:37 AM
  4. Replies: 6
    Last Post: 4 Mar 2009, 11:31 AM
  5. How to make tree panel height 100% inside accordion layout
    By pmadhur in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 22 Dec 2008, 11:06 AM

Thread Participants: 1