Results 1 to 3 of 3

Thread: How to refresh panel programatically after new html content added

  1. #1

    Default How to refresh panel programatically after new html content added

    The html content added in the initCarousel function does not show up in the first place. However, if I manually resized the windows of my browser (tried on safari and chrome), the content showed up (seems like the resize trigger a refresh/reload the web page).

    Also, if I changed the rootPanel type to TabPanel, worked fine. Can anyone please help? Thanks in advance.


    Here is the simplified version of my code to reproduce the problem I have.

    HTML source code
    Code:
     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
         <title>Question</title>
    	 <!-- Sencha Touch CSS -->
    	 <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    
    	 <!-- Sencha Touch JS -->
    	 <script type="text/javascript" src="sencha-touch.js"></script>
    
    	<!-- Application JS -->
    	<script type="text/javascript" src="question.js"></script>
    
     </head>
     <body>
    
     </body>
     </html>


    question.js
    Code:
    var panel1
    
    Ext.setup({
        glossOnIcon: true,
    
        onReady: function() {
    		
    		panel1 = new Ext.Panel({
    				scroll: 'vertical',
    				cls: 'timeline',
    				fullscreen: true,
    				style: "background-color: #fee;",
    
    				layout: {
    					type: "vbox",
    					align: "stretch"
    				},
    			});       
    		
    		initCarousel();
    		
    		rootPanel = new Ext.Panel({  //if change to Ext.TabPanel here, works fine
                fullscreen: true,
                items: [ panel1]        
    		});	
    		
        }//onRdy
    
    });
    
    myTpl = new Ext.XTemplate(
    	'<div class="avatarBottom">',
    		'<span class="user_name">{from_user}</span>',
    		'<span class="user_name">{text}</span>',
    	'</div>'
    );
    
    
    
    function initCarousel (){
    	console.log("initCarousel");
    	data = {from_user: "user_" + 1, text:"text_" + 1, index:1}; 
    
    	msg =  new Ext.Component({				
    		tpl: myTpl
    	});    
    	
    	msg.update(data);		
    	msgMenu =  new Ext.Component({				
    		html:	'<div>menu_1</div>'
    	});    
    	
    	item = new Ext.Carousel({				
    		height: 70,
    		items: [
    			msg,
    			msgMenu	
    		],
    		indicator: false
    	});
    	
    	panel1.add(item);
    }

  2. #2
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59

    Default

    Did you call 'doLayout()' on the panel after adding the new content?
    Did you set the content via 'update(myNewContentHere)' ?
    Couple ideas, hope that helps

  3. #3

    Default

    doLayout() fixed the problem. thanks a lot for your help

Similar Threads

  1. Update HTML content of panel added to a window
    By sanjay_1985 in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 2 Oct 2012, 5:22 AM
  2. how to refresh panel with new html content?
    By vijayrao in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Sep 2010, 3:03 PM
  3. [SOLVED] Content Panel : Add or refresh content
    By valery.stroeder in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 20 Nov 2009, 7:02 AM
  4. Column Model -> can it be added programatically?
    By CNash44 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 26 Mar 2008, 2:02 PM

Posting Permissions

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