Items are not rendered inside Ext.Window

[softbender]

Hello,

I have TreePanel component inside Ext.Window. the problem is the TreePanel is not rendered when i do win.Show().
But when i add child nodes in the render() event of Ext.Window, the TreePanel is displayed.

i don't want to add child nodes in the render event.

How to fix this problem?

[Condor]

We'll need to see the code.

[softbender]

Below is the entire code. Checkout the 'afterrender' event where i am populating the tree. If i remove the population code from that event and populate it as soon as treepanel is created, the treepanel is not shown in the Window

var messRefTime = 3 * 1000;
var messWin;
var loadMessWinFn = function(btn,a,hideWin) {
	
    if (!messWin) {
    	ChatService.getAllUser(function (chatUserlist){
	    	var usrLst = new Ext.Panel({
	            region: 'west',
	            split: true,
	            width: 200,
	            margins:'3 0 3 3',
	            cmargins:'3 3 3 3',
	            autoScroll:true,
				items : [{
					id: 'chatMenuTree',
					xtype: 'treepanel',
					border: false,
					rootVisible: false, 
					autoScroll: true,
					containerScroll: true,
					lines: false,
					root: {
					    draggable: false,
					    id: 'root',
					    expanded: true
					}
				}						
				]
	        });
	    	
	    	
	    	var usrTabs = new Ext.TabPanel({
	    		region: 'center',
	            id:'chatTabs',
	            enableTabScroll:true,
	            defaults:{autoScroll:true},
	            items:[]
	        });
	    	
	    	var usrChtTxt = new Ext.Panel({
	            region: 'south',
	            height: 50,
	            border:false,
	            items:[{
	            	 layout:'hbox',
	            	 layoutConfig: {
	                     padding:'1 1 1 1'
	                 },
	            	 items: [{xtype:'textarea',id:'chatMsgTxt',height: 45,width:301},
	            	         {xtype:'button',text:'Send',height: 45,width:70,
	            	         handler:function(but){
	            	        	 if(Ext.getCmp('chatTabs').getActiveTab()){
	            	        		 
	            	        		 var chatPanel = Ext.getCmp(Ext.getCmp('chatTabs').getActiveTab().getItemId());
		            	        	 var chatMsgTxt = Ext.getCmp('chatMsgTxt');
		            	        	 var chatMsg = chatMsgTxt.getValue();
		            	        	 
		            	        	 var node = Ext.getCmp('chatMenuTree').getNodeById('usernode_'+LID);
		            	        	 
		            	        	 chatMsgTxt.setValue('');
		            	        	 chatPanel.add(new Ext.form.DisplayField({cls:'hp-padding', html:formatChatMessage(node.attributes.text , chatMsg) }));
		            	        	 chatPanel.doLayout();
		            	        	 var d = chatPanel.body.dom;
		            	        	 d.scrollTop = d.scrollHeight - d.offsetHeight;
		            	        	 
		            	        	 ChatService.setChatMessage(chatPanel.personId,chatMsg);
	            	        	 }
	            	         }}
	            		 	]
	            }]
	            
	        });
	    	 
	    	var usrCht = new Ext.Panel({
	            region: 'center',
	            layout:'border',
	            margins:'3 3 3 0',
	            border:false,
	            items:[usrTabs,usrChtTxt]
	            
	        });
	    	messWin = new Ext.Window({
	            title    : 'Messenger',
	            animateTarget : btn.el,
	            closeAction   : 'hide',
	            id            : 'messWin',
	            height        : 400,
	            width         : 600,
	            initHidden : false,
	            hideMode: 'offsets',
	            //constrain     : true,
	            layout: 'border',
	            items: [usrLst, usrCht],
   	    	 	listeners : {
   	 				afterrender : function (){
   	 					PCUL(chatUserlist,Ext.getCmp('chatMenuTree'));
   	 				}
   	 			}
	        });
	    	if(!hideWin){
	    		messWin.show();
	    	}
	    	setTimeout("refreshMessage()",2000);
    	});
    }else{
    	messWin.show();
	}
};
//populateChatUserList
function PCUL(menu,treeCmp){

	for(var i=0;i<menu.length;i++){
		var menuContent = menu[i]; 
		for (var x in menuContent) 
		{ 
			var menuHeader = x;
			
			if(menuHeader){
				var rootNode = new Ext.tree.TreeNode({
					text: menuHeader,	
					cls:'hp-menu-header',
					expanded :true
				});
				
				var menuChildren = menuContent[x];
				for (var j=0;j<menuChildren.length;j++){
					var childContent = menuChildren[j];
					
					var cn = new Ext.tree.TreeNode({
						text:childContent.userName,
						qtip:childContent.userId,
						userTypeId:childContent.userTypeId,
						iconCls:'user-'+ ((childContent.loggedin) ? 'online' : 'offline') + '-' +childContent.userTypeId,
						leaf:true,
						id:'usernode_'+childContent.userId
					});
					
					cn.on('dblclick', function(nd){
						var pId = 'chatArea_'+nd.attributes.qtip;
						var cTab = Ext.getCmp('chatTabs');
						if(cTab.getItem(pId)){
							cTab.activate(pId);
						}else{
							cTab.add(new Ext.ChatPanel({
				                title: nd.attributes.text,
				                id:pId,
				                personId:nd.attributes.qtip,
				                items: [],
				                closable:true
				            }));
							cTab.setActiveTab(cTab.items.length-1)
						}
					});	
					rootNode.appendChild(cn);
					
				}
				var root = treeCmp.root;
				root.appendChild(rootNode);
			} 
		}
	}
}

function formatChatMessage(name,message){
	var now = new Date();
	return String.format('<b>{0}&nbsp;&lt;{2}&gt;:</b><br/>{1}<hr/>', name , message,now.format("j-M-Y g:i A"));	
}
//Ext.showMessage.msg('Done', 'Your fake items were loaded!');
function refreshMessage(){
	
	ChatService.getChatMessage(function(data){
		
		if(data != null){
			for(var idx=0;idx<data.length;idx++){
				if(data[idx].action == "MSG"){
					var pId = 'chatArea_'+data[idx].userId;
					var chatPanel = Ext.getCmp(pId);
					var node = Ext.getCmp('chatMenuTree').getNodeById('usernode_'+data[idx].userId);
					var msg = formatChatMessage(node.attributes.text , data[idx].message); 
					if(!chatPanel){
						chatPanel = new Ext.ChatPanel({
			                title: node.attributes.text,
			                id:pId,
			                personId: data[idx].userId,
			                items: [],
			                closable:true
			            }) 
						var chatTabCmp = Ext.getCmp('chatTabs'); 
						
						if(chatTabCmp.items.length == 0){
							chatTabCmp.add(chatPanel);
							chatTabCmp.setActiveTab(pId);
						}else{
							chatTabCmp.add(chatPanel);
						}
					}
					
					chatPanel.add(new Ext.form.DisplayField({cls:'hp-padding', html:msg }));
					chatPanel.doLayout();
				}else if(data[idx].action == "USR_LIN"){
					var node = Ext.getCmp('chatMenuTree').getNodeById('usernode_'+data[idx].userId);
					Ext.fly(node.getUI().iconNode).replaceClass('user-offline-' +node.attributes.userTypeId, 'user-online-' +node.attributes.userTypeId);
					
				}else if(data[idx].action == "USR_LOUT"){
					var node = Ext.getCmp('chatMenuTree').getNodeById('usernode_'+data[idx].userId);
					Ext.fly(node.getUI().iconNode).replaceClass('user-online-' +node.attributes.userTypeId, 'user-offline-' +node.attributes.userTypeId);
					
				}
			}
		}
		setTimeout("refreshMessage()",messRefTime);
	});
}

[Condor]

Your west region is missing a layout (e.g. layout:'fit').

But the real problem is overnesting: Why do you need the usrLst panel to hold a treepanel? Why not use the treepanel directly?

[softbender]

Excellent! Its working. I don't understand why the problem is because of overnesting?

[Animal]

You put the treepanel INSIDE a panel which had no configuration (layout) telling it how to do any sizing with any children you might add to it.

This issue ix extensively covered in the API docs ate every opportunity, and also comes up here about once a day.

[softbender]

Thanks for the reply. One more problem i found is the Ext.Window is showing the TreePanel only when 'initHidden : false'
any ideas why?

[Condor]

initHidden:false just make the window call show() automatically. There shouldn't be any difference with calling show() yourself.

[softbender]

I am sorry i mean to say initHidden:true

[Condor]

A window with initHidden:true is just a normal window. There shouldn't be any difference between specifying initHidden:true or not specifying it.