1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    12
    Vote Rating
    0
    softbender is on a distinguished road

      0  

    Default Items are not rendered inside Ext.Window

    Items are not rendered inside Ext.Window


    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?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    We'll need to see the code.

  3. #3
    Ext User
    Join Date
    Feb 2010
    Posts
    12
    Vote Rating
    0
    softbender is on a distinguished road

      0  

    Default


    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
    Code:
    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);
    	});
    }

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    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?

  5. #5
    Ext User
    Join Date
    Feb 2010
    Posts
    12
    Vote Rating
    0
    softbender is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Feb 2010
    Posts
    12
    Vote Rating
    0
    softbender is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

  9. #9
    Ext User
    Join Date
    Feb 2010
    Posts
    12
    Vote Rating
    0
    softbender is on a distinguished road

      0  

    Default


    I am sorry i mean to say initHidden:true

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

Similar Threads

  1. How to adjust grid panel height automatically inside window when other items collapse
    By Venkateswara Rao in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 7 Oct 2010, 3:14 AM
  2. How to align items inside an fbar in ext 3.0?
    By elishnevsky in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 24 Apr 2009, 7:54 AM
  3. Replies: 10
    Last Post: 8 Apr 2009, 12:42 AM
  4. Replies: 1
    Last Post: 17 Aug 2008, 2:31 PM
  5. Replies: 3
    Last Post: 14 Apr 2008, 11:56 PM

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar