PDA

View Full Version : [UNKNOWN][3.??] TreePanel nodes are not diplayed on IE7 browser



Suresh Kumar
29 Dec 2009, 11:16 PM
Hi,

I have a TreePanel inside a window. I can add nodes to the TreePanel and re-arrange the nodes with-in the TreePanel.
Problem with display of nodes when the brower is IE7
When the TreePanel is rendered, the nodes are not visible till the mouse is moved over the nodes and sometimes it takes longer time to display the nodes after the mouse moved over. The same scenario works perfectly when tested on IE6 and IE8.

Please let me know your suggestion.

Thanks and Regards,
Suresh

Condor
29 Dec 2009, 11:54 PM
IE7 does have some problems with absolutely and relatively positioned elements.

Could you post an example that demonstrates the problem?

ps. Switching to quirks mode would also solve your problem.

Suresh Kumar
31 Dec 2009, 2:46 AM
Hi,

Please find the sample code placed below and attached UI screen shot.


function

ReorderExpressionsView(aModel){
this.model = aModel;
}
ReorderExpressionsView.prototype ={

constructor: ReorderExpressionsView,
init:function(){

this.registerEvents();

},

registerEvents:function(){
},

getObservable:function(){


if(!this.observable){

var Observable =function(){
this.addEvents({
'reorderExpressions':true,
'cancel':true
});
};



Ext.extend(Observable, Ext.util.Observable);


this.observable =new Observable();

}


returnthis.observable;

},

createDialog:function(){

var dialogTitle ="Reorder Expressions";

var html ='<div id="reorderExpressionsPanel" class="defaultPanelContainer">'+


'<div class="defaultWrapper crosstabInfoText">'+

'<span>Drag & drop expressions to reorder:</span>'+
'</div>'+
'<div id="reorderExpressionsTreeWrapper" class="defaultWrapper">'+
'<div id="reorderExpressionsTreeDiv">'+
'</div>'+
'</div>'+
'</div>'+

'';


this.dialog =new Ext.Window({

title: dialogTitle,
modal:true,
height:490,
width:330,
resizable:false,
plain:false,
buttons:[new Ext.Button({
text:'Reorder',
type:'submit',
handler:this.onReorderExpressions.createDelegate(this)
}),
new Ext.Button({

text:'Cancel',

handler:this.onCancel.createDelegate(this)
})],


html: html

});
this.dialog.render(Ext.getBody());



this.dialog.on("close",this.onCancel,this);

},

createExpressionsTree:function(){

this.expressionsTree =new Ext.tree.TreePanel({

el:'reorderExpressionsTreeDiv',
baseCls:'reorderExpressionsTreeContainer',

animate:false,
enableDD:true,
containerScroll:true,
rootVisible:false,
selModel:new Ext.ux.tree.EnhancedMultiSelectionModel({

cascadeSelect:false
}),



autoScroll:true,
useArrows:true,

lines:false,
ddScroll:true,
ddGroup:'reorderExpressionsTreeGroup',
height:400,
width:300,
listeners:{
'render':{fn:this.onExpressionsTreeRender,
scope:this


}}
});


this.expressionsTreeRootNode =new Ext.tree.TreeNode({
id:'ExpressionsTreeRoot',
text:'Expressions Tree Root',
draggable:false,
allowDrag:false,
allowDrop:false
});

this.expressionsTree.setRootNode(this.expressionsTreeRootNode);

this.expressionsTree.render();
this.expressionsTreeRootNode.expand(false,false);
},



onExpressionsTreeRender:function(expressionsTreePanel){

expressionsTreePanel.dragZone =new Ext.ux.tree.TreeMultiDragZone(expressionsTreePanel, expressionsTreePanel.dragConfig ||{
ddGroup: expressionsTreePanel.ddGroup ||"TreeDD",
scroll: expressionsTreePanel.ddScroll
});


expressionsTreePanel.dropZone =new Ext.ux.tree.TreeMultiDropZone(expressionsTreePanel, expressionsTreePanel.dragConfig ||{

ddGroup: expressionsTreePanel.ddGroup ||"TreeDD"
});

},




addVariableToExpressionTree:function(){

var variable =this.model.getVariable();

var rawType = variable.getRawType();
var copyOfQuestion = variable.isCopyOfQuestion();

var nodeClass ="textLeafNode";

var friendlyRawType ="";
if(rawType == Question.NUMERIC){

nodeClass ="numericLeafNode";
friendlyRawType ="Numeric";
}elseif(rawType == Question.WEIGHT){

nodeClass ="weightLeafNode";
friendlyRawType ="Weight";
}elseif(rawType == Question.TEXT){

nodeClass ="textLeafNode";
friendlyRawType ="Single Answer";
}elseif(rawType == Question.RATING){

nodeClass ='ratingLeafNode';
friendlyRawType ="Rating";
}elseif(rawType == Question.MULTIANSWER){

nodeClass ='multiAnswerLeafNode';
friendlyRawType ="Multi-Answer";
}elseif(rawType == Question.PERIOD){

nodeClass ='periodLeafNode';
friendlyRawType ="Period";
}


if(!copyOfQuestion){

//This will ensure that a normally created variable differs in format from a variable created as a copy of a question.

nodeClass = nodeClass +' variableNode';

}


var tooltipHtml ='<b>'+ variable.getName()+'</b>';

if(friendlyRawType.length >0){

tooltipHtml = tooltipHtml +'<br><b>Type:</b> '+ friendlyRawType;
}


var variableName = Util.convertToInnerHtml(variable.getName());
// Create a new Variable tree node.



var newVariableNode =new Ext.tree.TreeNode({
text: variableName,
id: variable.getId(),
rawObject: variable,
isVariable:true,
cls: nodeClass,
draggable:false,
allowDrag:false,
allowDrop:true,
isTarget:false,
qtipCfg:{
text: tooltipHtml
}

});


// Append Expressions to the Variable tree node.

var expressions = variable.getChildren();

var expressionName;
var expressionParamName;

for(var i =0; i < expressions.length; i++){

var expression = expressions[i];

rawType = expression.getRawType();

copyOfQuestion = expression.isCopyOfQuestion();
var netType = expression.isNetType();

var expressionNodeClass ='';
if(!copyOfQuestion){

//This will ensure that a normally created variable differs in format from a variable created as a copy of a question.

expressionNodeClass ='variableNode';

if(netType){

expressionNodeClass = expressionNodeClass +' netNode';
}}
expressionName = Util.convertToInnerHtml(expression.getName());
var newExpressionNode =new Ext.tree.TreeNode({

text: expressionName,
id: expression.getId(),
rawObject: expression,
parent: variable,
isVariable:true,
cls: expressionNodeClass,
draggable:true,
allowDrag:true,
allowDrop:false,
qtipCfg:{
text:'<b>'+ expressionName +'</b><br><b>Variable:&nbsp;</b>'+ variableName +' '
}});
newVariableNode.appendChild(newExpressionNode);

}


this.expressionsTreeRootNode.appendChild(newVariableNode);


if(!newVariableNode.isExpanded()){

newVariableNode.expand();
}

},


show:function(){

this.createDialog();

this.createExpressionsTree();
this.addVariableToExpressionTree();
this.dialog.show();
},



close:function(){

if(this.dialog){

if(this.expressionsTree){
this.expressionsTree.destroy();
}

this.dialog.close();

this.dialog =null;

}
},




onReorderExpressions:function(){

var variableNode =this.expressionsTreeRootNode.firstChild;

this.getObservable().fireEvent('reorderExpressions', variableNode);
},

onCancel:function(){

this.getObservable().fireEvent('cancel');

}
};





Please let me know your suggestion.




Thanks and Regards,

Suresh