1. #1
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    North is on a distinguished road

      0  

    Default Panel / Container refresh

    Panel / Container refresh


    My panel first loads with HTML instructions telling the user to chose an item from a grid. Once the user clicks on an item, I want the original HTML panel to be refreshed with a new panel that has detail information about the item they clicked on. I've been able to put all of this together, except the original HTML panel never gets refreshed with the updated detail information. I've tried a ton of other options with no success. Here's my current code:

    P.S. Thanks for any help you can offer!

    Code:
    Function CreateTabPanel(accountPanel)
    {
    
        var htmlComponent = new Ext.Panel({html: 'Instructional HTML Text'});
      
        var myPanel = new Ext.Panel({
             items: [
                 htmlComponent
             ]
        });
    
        if(accountPanel != null)  //accountPanel is passed in once the user clicks on an item.
        {
            myPanel.add(accountPanel);
            myPanel.remove(htmlComponent);
            myPanel.doLayout();
        }
    	  
         ProfileTab = new Ext.Panel({
    		cls: 'profile-panel',
    		id: 'ProfileTab',
    		border: false,
    		autoScroll: true,
    		layout: 'fit',
    		title: 'Profile',
    	    items: myPanel 
    		
    	});
    	
            ///
    	///Code for one other tab the is unrelated.
            ///
    
    	items = [];	
    	items.push(ProfileTab);
    	items.push(OtherTab);
       
    	
    	TabPanel = new Zen.FlatTabPanel({
    		cls: 'transparent-panel',
    		border: false,
    		region: 'center',
    		activeTab: 0,
    		items: [ items	]
    	});
    }

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Default


    Have you tried load()

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    North is on a distinguished road

      0  

    Default


    Yes I have tried load() on myPanel and on the TabPanel. In both cases I get a "this.body is undefined" error inside of the Panel.js library class.

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Default


    Is the panel rendered? because you might be getting this error because of this.

  5. #5
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    North is on a distinguished road

      0  

    Default


    Which panel? The htmlComponent panel, the ProfileTab panel, the accountPanel (which is passed in), or the TabPanel?

  6. #6
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    North is on a distinguished road

      0  

    Default


    I think I see what you mean. The accountPanel needs to be rendered to the ProfileTab--instead of being passed in the accountPanel. I know that when you create a panel you can specify the renderTo: field, but how do I render one panel to other?

    Let's say I change my code so that when the user clicks on a grid item, the accountPanel is created with a renderTo: field. What do I need to set the renderTo: field as in order to get the accountPanel to render to the ProfileTab panel?


    By the way, thanks for you help CrazyEnigma.

  7. #7
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    you don't render a panel to another, you add an item to a container. A panel also is a container and may contain panels.
    Code:
    container.add(element);
    container.doLayout();
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Default


    Upon close inspection of your code. You have too many panels going on.

    You might want to remove the panel first before you add a new one.

    myPanel -> htmlContainer, then you add the accountPanel, and then remove the htmlContainer

    Then you create a ProfileTab which is a Panel not a tabpanel, and add myPanel, create an items array, push panels to the array, and add it to the items of another panel.

    I don't think you need so many embedded panels.

    tabpanel -> panel should be sufficient.

    Given that you are adding panels to the tabpanel, you can remove the panel of html container from the tabpanel, and add the accountPanel. I have always reserved the need to use the "id" for anything, but this is one case where you would use "id".

    Code:
    var tabpanel = <your reference to you tabbed panel>
    var panel = Ext.getCmp("htmlhelp");
    if (panel)
    {
        tabpanel.remove(panel);
        if (accountPanel)
        {
            tabpanel.add(accountPanel);
            accountPanel.doLayout();
            accountPanel.setVisible(true);
        }
    }
    "[]" is short for an array. Your code embeds an array within an array - that might be your problem.

  9. #9
    Ext User
    Join Date
    May 2010
    Posts
    8
    Vote Rating
    0
    North is on a distinguished road

      0  

    Default Still not working

    Still not working


    CrazyEnigma, I followed your code and the refresh still isn't working. What ever gets loaded into the TabPanel the first time stays there no matter what.

  10. #10
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Default


    You need to clean up your code regardless. It is too messy.

Thread Participants: 2

Tags for this Thread