Results 1 to 1 of 1

Thread: Tree Panel Render Error in IE7

  1. #1

    Default Tree Panel Render Error in IE7

    Alright so I have been working on a "wall" for this project it started as a fork from an example from the ext 1.1 docs. everything worked fine on both firefox and IE until recently. I have migrated the tree over to the new version of ext. It renders fine in firefox but horribly wrong in IE7.

    Code:
    // JavaScript Document
    // Request Tracker Wall Object
    
    Ext.namespace('Tracker');
    
    Tracker.Wall = function(config)
    {
    	// turn on quick tips
        Ext.QuickTips.init();
    	/**
    	* configuration options
    	*/
    	var ticketID = null;
    	var wallDisplay = null;
    	var toolbarDisplay = null;
    	var croot = null;
    	var ctree = null;
    	var btns = null;
    	var tb = null;
    	var topNode = null;
    	var loadDefaults = true;
    	var sm = null;
    	var ge = null;
    	var ctxMenu = null;
    	var buttons = null;
    // seeds for the new node suffix
        var cseed = 0, oseed = 0;
    	var classType = '';
    	var xt = Ext.tree;
    	var userName = null;	
    	/*
    	* set configuration options
    	*/
    	ticketID = config.ticketID != null ? config.ticketID : ticketID;
    	wallDisplay = config.wallDisplay != null ? config.walldisplay : wallDisplay;
    	toolbarDisplay = config.toolbarDisplay != null ? config.toolbarDisplay: toolbarDisplay;
    	croot = config.croot != null ? config.croot : croot;
    	ctree = config.ctree != null ? config.ctree : ctree;
    	btns = config.btns != null ? config.btns: btns;
    	tb = config.tb != null ? config.tb : tb;
    	topNode = config.topNode != null ? config.topNode : topNode;
    	loadDefaults = config.loadDefaults != null ? config.loadDefaults: loadDefaults;
    	sm = config.sm != null ? config.sm : sm;
    	ge = config.ge != null ? config.ge : ge;
    	ctxMenu = config.ctxMenu != null ? config.ctxMenu : ctxMenu;
    	
    	if(toolbarDisplay == null){
    		tb = new Ext.Toolbar({renderTo:'main-tb'});	
    	}
    	else{
    		tb = new Ext.Toolbar({renderTo:toolbarDisplay});
    	}
    	 if(loadDefaults == true){
    		loadDefaultButtons();
    		loadDefaultTreePanel();
    		loadDefaultSelectionModel();
    		loadDefaultTreeEditor();
    		loadDefaultContextMenu();
    	}
    //get tree panel
    	function getTreePanel(){
    		return ctree;
    	}
    	
    //getContextMenu
    	function getContextMenu(){
    		return ctxMenu;
    	}
    	
    //get toolbar
    	function getToolbar()
    	 {
    		return tb; 
    	 }
    
    //getSelectionModel
    	function getSelectionModel(){
    		if (sm == null){
    			return ctree.getSelectionModel();
    		}
    		else{
    			return sm;
    		}
    	}	
    	
    //getTreeEditor
    	function getTreeEditor(){
    		return ge;
    	}
    
    //create tree panel
    	function createTreePanel(text,urlPath){
    		// the component tree
    			ctree = new xt.TreePanel({
    				el:wallDisplay,
    				//region:'center',
    				animate:true,
    				enableDD:true,
    				autoScroll: true,
    				containerScroll: true,
    				lines:false,
    				rootVisible:false,
    				loader: new Ext.tree.TreeLoader()
    			});
    		
    		// create root node
    			croot = new xt.AsyncTreeNode({
    				allowDrag:false,
    				allowDrop:true,
    				id:'croot',
    				text:text,
    				cls:'croot',
    				loader:new Ext.tree.TreeLoader({
    					dataUrl:urlPath,
    					baseParams: {taskid: ticketID},
    					createNode: readNode 
    				})
    			});
    			
    			ctree.setRootNode(croot);
    			ctree.render();
    			croot.expand();
    		
    			
    			ctree.on('contextmenu', prepareCtx);
    		
    			// track whether save is allowed
    			ctree.on('append', trackSave);
    			ctree.on('remove', trackSave);
    			ctree.el.swallowEvent('contextmenu', true);
    			ctree.el.on('keypress', function(e){
    				if(e.isNavKeyPress()){
    					e.stopEvent();
    				}
    			});
    		}
    		
    //create new component
    	function createNewComponent(id, text, leaf){
    	
    	var dsRd = Ext.data.Record.create([
    		{name: 'email'}, 
    		{name: 'text'}, 
    		{name: 'private'},
    		{name: 'timeposted'},// type: 'date', dateFormat: 'Y-m-d H:i:s'},
    		{name: 'solution'},
    		{name: 'personid'},
    		{name: 'postid'}
    		
    	]);		 
    	
            var node = new xt.TreeNode({
                text: formatHeader(userName),
                iconCls:'cmp',
                cls:'private',
                type:'cmp',
                id: id,
                cmpId:id,
                allowDelete:true,
                allowEdit:false,
    			leaf: false
            });
    		//logic to get and set the top node and then place the new node before it
    		if (topNode == null)
    		{
            croot.appendChild(node);
    		topNode = node;
    		}
    		else
    		{
    		croot.insertBefore(node,topNode);
    		topNode = node;
    		}
    	
    	node.appendChild(new xt.AsyncTreeNode({
                text: 'enter text here',
                allowDrag:false,
                allowDrop:true,
                iconCls:'cmp',
                cls: 'leaf',
    			type:'cmp',
                cmpId:id,
    			leaf: true,
    			allowEdit: true,
                allowDelete:false
                //expanded:true
            })
    	);
    
            return node;
        }
    
    //load default tree panel
    	function loadDefaultTreePanel(){
        // the component tree
    		ctree = new xt.TreePanel({
    			el:'cbody',
    			region:'center',
    			animate:true,
    			enableDD:true,
    			autoScroll: true,
    			containerScroll: true,
    			lines:false,
    			rootVisible:false,
    			loader: new Ext.tree.TreeLoader()
    		});
    	
    	// create root node
    		croot = new xt.AsyncTreeNode({
    			allowDrag:false,
    			allowDrop:true,
    			id:'croot',
    			text:'Wall Posts',
    			cls:'croot',
    			loader:new Ext.tree.TreeLoader({
    				dataUrl:'assets/ajax/ajaxwallposts.cfm',
    				baseParams: {taskid: ticketID},
    				createNode: readNode 
    			})
    		});
    		
    		ctree.setRootNode(croot);
    		ctree.render();
    		croot.expand();
    	
    		
    		ctree.on('contextmenu', prepareCtx);
    	
    		// track whether save is allowed
    		ctree.on('append', trackSave);
    		ctree.on('remove', trackSave);
    		ctree.el.swallowEvent('contextmenu', true);
    		ctree.el.on('keypress', function(e){
    			if(e.isNavKeyPress()){
    				e.stopEvent();
    			}
    		});
    	}
    	
    //load default selection model
    	function loadDefaultSelectionModel(){
        // when the tree selection changes, enable/disable the toolbar buttons
        sm = ctree.getSelectionModel();
        sm.on('selectionchange', function(){
            var n = sm.getSelectedNode();
            if(!n){
                btns.remove.disable();
                btns.option.disable();
                return;
            }
            var a = n.attributes;
            btns.remove.setDisabled(!a.allowDelete);
            //btns.option.setDisabled(!a.cmpId);
        });
    	}
    
    //load default tree editor
    	function loadDefaultTreeEditor()
    	{
    			 // create the editor for the component tree
    		ge = new xt.TreeEditor(ctree, {
    		
    		autosize: true,
    		completeOnEnter: true,
    		renderTo: sm.getSelectedNode()
    		
    		});//new Ext.form.TextArea({allowBlank:false,height:100,width:700}));
    		ge.on('beforestartedit', function(){
    			if(!ge.editNode.attributes.allowEdit){
    				return false;
    			}
    		});	
    	}
    	
    //load default context menu
        function loadDefaultContextMenu()
    	{
    	// context menus
    	ctxMenu = new Ext.menu.Menu({
            id:'copyCtx',
            items: [{
                    id:'expand',
                    handler:expandAll,
                    cls:'expand-all',
                    text:'Expand All'
                },{
                    id:'collapse',
                    handler:collapseAll,
                    cls:'collapse-all',
                    text:'Collapse All'
                },'-',{
                    id:'remove',
                    handler:removeNode,
                    cls:'remove-mi',
                    text: 'Remove Item'
            }]
        });
    	}
    	
    //load default buttons 	
    	function loadDefaultButtons(){
    		buttons = tb.add({
    			id:'save',
    			text:'Save',
    			disabled:true,
    			handler:savePost,
    			cls:'x-btn-text-icon save',
    			tooltip:'Saves all components to the server'
    		},'-', {
    			id:'add',
    			text:'New Wall Post',
    			handler:addComponent,
    			cls:'x-btn-text-icon add-cmp',
    			tooltip:'Add a new Wall Post'
    		},{
    			id:'remove',
    			text:'Remove Post',
    			disabled:true,
    			handler:removeNode,
    			cls:'x-btn-text-icon remove',
    			tooltip:'Remove the selected item'
    		},'-',{
    			id:'expand',
    			text:'See All Posts',
    			disabled:false,
    			handler:expandAll,
    			cls:'x-btn-text-icon add-opt',
    			tooltip:'See all wall posts'
    		},{
    			id:'hide',
    			text:'Hide All Posts',
    			disabled:false,
    			handler:collapseAll,
    			cls:'x-btn-text-icon hide',
    			tooltip:'See all wall posts'
    		});
    	// for enabling and disabling
    		btns = tb.items.map;	
    	}
    	
    //load compnents
    	function loadComponents(id, text, leaf, private, solution, problem){
    	
    	var dsRd = Ext.data.Record.create([
    		{name: 'email'}, 
    		{name: 'text'}, 
    		{name: 'private'},
    		{name: 'timeposted'},// type: 'date', dateFormat: 'Y-m-d H:i:s'},
    		{name: 'solution'},
    		{name: 'personid'},
    		{name: 'postid'}
    		
    	]);	
    	if (problem == 'y'){
    		classType = "problem";
    		}
    		else if (solution == 'y'){
    		classType = "solution";
    		}
    		else if (private == 'y'){
    		classType = "private";
    		}
    		else{
    		classType = "none";
    		}
    	//classType = sortClass(private, solution, problem);
    	
            var node = new xt.TreeNode({
                text: formatHeader(text),
                iconCls:'cmp',
                cls: classType,
                type:'cmp',
                id: id,
                cmpId:id,
                allowDelete:true,
                allowEdit:false,
    			leaf: false
            });
    		//logic to get and set the top node and then place the new node before it
           	if (topNode == null)
    		{
            croot.appendChild(node);
    		topNode = node;
    		}
    		else
    		{
    		croot.insertBefore(node,topNode);
    		topNode = node;
    		}
    		
    	var ds = new Ext.data.Store({
            // load using HTTP
            proxy: new Ext.data.HttpProxy({url: 'assets/ajax/ajaxwallposts.cfm'}),
    		reader: new Ext.data.JsonReader({id: 'postid'}, dsRd),
        //	filterBy: myfilter
    		baseParams: {node: id}
    	});	
    	ds.load();
    	ds.on('load',function(){
    	node.appendChild(new xt.AsyncTreeNode({
                text: formatPost(ds.getAt(0).get('text'),ds.getAt(0).get('timeposted'),ds.getAt(0).get('personID')),
                //allowDrag:false,
                //allowDrop:true,
                iconCls:'cmp',
                cls: 'leaf',
    			type:'cmp',
                cmpId:id,
    			leaf: true
                //allowDelete:false,
                //children:cfiles||[],
                //expanded:true
            })
    	);
    	})
    	
    		
    
    
            return node;
        }
    
    //format header
    	function formatHeader(email){
    	//
    		return String.format("<b><span style='color: black;>Posted By: {0}</span>", email);
    	};
    
    //format post
    	function formatPost(post, postTime, personID){
    	//
    		var time = postTime == null ? new Date() : postTime;
    		return String.format("<b><span style='color: black;'>{0}</span></b> <br>Time Posted: {1}<span style='color: #666666'><br>Posted By - {2}</span>", post, time, personID);
    	};
    
    //createNewPost
    	function createNewPost(headerText, postText, postType){
    		var node = new xt.TreeNode({
                text: formatHeader(headerText),
                iconCls:'cmp',
                cls: postType,
                type:'cmp',
                id: id,
                cmpId:id,
                allowDelete:true,
                allowEdit:false,
    			leaf: false,
    			unformatted: headerText
            });
    		//logic to get and set the top node and then place the new node before it
    		if (topNode == null)
    		{
            croot.appendChild(node);
    		topNode = node;
    		}
    		else
    		{
    		croot.insertBefore(node,topNode);
    		topNode = node;
    		}
    	
    	node.appendChild(new xt.AsyncTreeNode({
                text: formatPost(postText),
                allowDrag:false,
                allowDrop:true,
                iconCls:'cmp',
                cls: 'leaf',
    			type:'cmp',
                cmpId:id,
    			leaf: true,
    			allowEdit: true,
                allowDelete:false,
    			unformatted: postText
                //expanded:true
            })
    	);
    
            return node;
    	}
    
    // readNode
    	function readNode(o){
    	//var text = formatHeader(o.text);
    		loadComponents(o.id, o.text, o.leaf, o.private, o.solution, o.problem);
        }
    
    //add compnent
    	function addComponent(){
            var id = guid('c-');
            var text = 'Component '+(++cseed);
            var node = createNewComponent(id, text);
            node.expand(false, false);
            node.select();
            node.lastChild.ensureVisible();
            ge.triggerEdit(node);
        }
    
    //remove node
        function removeNode(){
            var n = sm.getSelectedNode();
            if(n && n.attributes.allowDelete){
                ctree.getSelectionModel().selectPrevious();
                n.parentNode.removeChild(n);
            }
        }
    
    //guid
    	function guid(prefix){
            return prefix+(new Date().getTime());
        }
    
    //track save
        function trackSave(){
            btns.save.setDisabled(!croot.hasChildNodes());
        }
    
    //store children
        function storeChildren(cmp, n, name){
            if(n.childrenRendered){
                cmp[name] = [];
                n.eachChild(function(f){
                    cmp[name].push(f.attributes);
                });
            }else{
                cmp[name] = n.attributes.children || [];
            }
        }
    	
    //prepare context menu
        function prepareCtx(node, e){
            node.select();
            ctxMenu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
            ctxMenu.showAt(e.getXY());
        }
    	
    //collapse all
        function collapseAll(){
            ctxMenu.hide();
            setTimeout(function(){
                croot.eachChild(function(n){
                   n.collapse(false, false);
                });
            }, 10);
        }
    	
    //expand all
        function expandAll(){
            ctxMenu.hide();
            setTimeout(function(){
                croot.eachChild(function(n){
                   n.expand(false, false);
                });
            }, 10);
        }
    	
    //savePost
    	function savePost(node, logic){}
    	
    	// *** Public Methods ***
    	return {
    		getToolbar: function(){
    			return getToolbar();	
    		},
    		getTreePanel: function(){	
    			return  getTreePanel();	
    		},
    		getContextMenu: function(){
    			return getContextMenu();
    		},
    		getSelectionModel: function(){
    			return getSelectionModel();
    		},
    		getTreeEditor: function(){
    			return getTreeEditor();	
    		},
    		createTreePanel: function(text,urlPath){
    			createTreePanel(text,urlPath);
    		},
    		createNewCompnent: function(id,text,leaf){
    			createNewCompnent(id,text,leaf);
    		},
    		createNewPost: function(headerText,postText,postType){
    			return createNewPost(headerText, postText, postType);
    		},
    		addComponent: function(){
    			return addComponent();	
    		},
    		getButtons: function(){
    			return btns;	
    		},
    		savePost: function(node, logicURL){
    				
    				// callback handler if submit has been successful     
    			  var conn = new Ext.data.Connection();
    			conn.request({method: 'POST', url: logicURL, 
    				params: {	TASKID: ticketID,
    							EMAIL: node.attributes.unformatted,
    							POST: node.findChild('cls', 'leaf').attributes.unformatted,
    							PRIVATE: node.attributes.cls == 'private' ? 'Y' : 'N',
    							SOLUTION: node.attributes.cls == 'solution' ? 'Y' : 'N',
    							PROBLEM: node.attributes.cls == 'problem' ? 'Y' : 'N'} 
    						});
    			
    			conn.on('requestcomplete', function(sender, param) {
    				var response = Ext.util.JSON.decode(param.responseText);
    				
    				if (response.success) {
    					Ext.Msg.hide(); 			
    				}
    				else
    				{
    					Ext.Msg.hide(); 
    					Ext.Msg.alert('Failure :-(', response.msg); 
    				}
    			}, { scope: this }
    		)}	
    	};
    }
    Display Code
    Code:
    Ext.namespace('Tracker');
    Ext.onReady(function(){
    	var userID = <cftry><cfoutput>#session.UserID#</cfoutput><cfcatch><cflocation url="logout.cfm"></cfcatch></cftry>;
    	var authUser = "<cftry><cfoutput>#session.UserName#</cfoutput><cfcatch><cflocation url='logout.cfm'></cfcatch></cftry>";
    	var node, toolbar, buttons;
    	var wall;
    	var postType;
    	wall = new Tracker.Wall({ticketID:11121});
    var form = new Ext.form.FormPanel({
            id: 'form',
    		baseCls: 'x-plain',
            labelWidth: 55,
            url:'save-form.php',
            defaultType: 'textfield',
    
            items: [{
                xtype:'fieldset',
                //checkboxToggle:true,
                title: 'Post Type',
                autoHeight:true,
                //defaults: {width: 210},
                defaultType: 'radio',
                //collapsed: true,
                items :[{
                        boxLabel: 'private',
                        name: 'type',
    					value: 'private',
    					hideLabel:true
                    },{
                        boxLabel: 'solution',
                        name: 'type',
    					value: 'solution',
    					hideLabel:true
                    },{
                        boxLabel: 'problem',
                        name: 'type',
    					value: 'problem',
    					hideLabel:true
                    }
                ]
            },
    		{
                xtype: 'textarea',
                hideLabel: true,
                id: 'msg',
                anchor: '100% -0'  // anchor width by percentage and height by raw adjustment
            }
    		]
        });
    	var win = new Ext.Window({
                    el:'hello-win',
    				title: 'New Wall Post',
                    layout:'fit',
                    width:500,
                    height:300,
                    closeAction:'hide',
                    plain: true,
    				items: form,
                    buttons: [{
                        text:'Submit',
    					handler: function(){
    					var type = win.getComponent('form').find('name','type')[1];
    					//Ext.Msg.alert('',type.getGroupValue());
    					node = wall.createNewPost(authUser,win.getComponent('form').getComponent('msg').getValue(),type[0].getGroupValue());
    					wall.savePost(node,"assets/ajax/ajaxWallPostSave.cfm");
    					win.hide();
    					}
                    },{
                        text: 'Close',
                        handler: function(){
                            win.hide();
                        }
                    }]
    				
                });
    	
    	toolbar = wall.getToolbar();
    	buttons = wall.getButtons();
    	buttons.add.handler = function(){
    	
    	
            win.show(this);
    	};
    	node = wall.createNewPost("testHeader","testPost", "solution");
    	//wall.savePost(node,"assets/ajax/ajaxWallPostSave.cfm");
    });
    </script>
    
    <style>
    .x-tree-node{ white-space:normal; line-height:18px}
    .x-tree-node-indent { height: 0px; width: 0px; }
    .x-tree-icon,.x-tree-ec-icon,.x-tree-elbow-line,.x-tree-elbow,.x-tree-elbow-end,.x-tree-elbow-plus,.x-tree-elbow-minus,.x-tree-elbow-end-plus,.x-tree-elbow-end-minus{border:0 none;height:18px;margin:0;padding:0;vertical-align:middle;width:0px;background-repeat:no-repeat;}
    .x-tree-node img.cmp, .menu-cmp .x-menu-item-icon{
        background-image:url(blank.gif);
    }
    .x-tree-node-collapsed .x-tree-node-icon,.x-tree-node-expanded .x-tree-node-icon,.x-tree-node-leaf .x-tree-node-icon{border:0 none;height:18px;margin:0;padding:0;vertical-align:middle;width:0px;background-position:center;background-repeat:no-repeat; }
    .private { background: #CC3300 !important; line-height:18px; margin-top:1px; margin-bottom:1px; padding-top:3px; padding-bottom:2px;}
    .solution { background-color: #9933FF !important; line-height:18px; margin-top:1px; margin-bottom:1px; padding-top:3px; padding-bottom:2px;}
    .problem { background-color: #00CCFF !important; line-height:18px; margin-top:1px; margin-bottom:1px; padding-top:3px; padding-bottom:2px;}
    </style>
    </head>
    <body>
    <div id="main-ct" style="overflow:auto; height:302px;width:700px;border:1px solid #c3daf9;">
    <div id="main-tb"></div>
    <div id="cbody" style="height:91%;"></div>
    </div>
    <div id="hello-win" class="x-hidden">
        <div class="x-window-header"</div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •