PDA

View Full Version : Tree Panel Render Error in IE7



warner.andy
11 Dec 2007, 11:22 AM
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.



// 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


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>