Results 1 to 8 of 8

Thread: Rendering component via callback

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    11

    Default Rendering component via callback

    I've been searching and trying things for hours and I just don't seem to be getting anywhere. Hoping you guys can help

    I'm extending FormPanel and adding the form fields in initComponent in datastore callback function (the form fields being added depend upon data fetched by the datastore).

    The problem I'm having is that if I don't call render() at the end of initComponent (after all of the form fields have been added), my FormPanel renders blank. How can I tell the render method to fire when initComponent is done (i.e. after the datastore finishes getting data and all of the form fields have been added)?

    I haven't been able to find many examples of the fireEvent event method - not even sure if it is appropriate here.

    Thanks!

    - Joe

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    11

    Default

    Just wanted to add that my FormPanel is an item in a ViewPort so I'm assuming that explicitly calling render() and/or applyTo() are out of the question anyway.

  3. #3
    Ext User
    Join Date
    Jan 2011
    Location
    Chicago, IL
    Posts
    5

    Default

    Hey Joe,

    This morning, I actually had a problem with a GridPanel not loading data until I did something to it (i.e. rearranged columns), but I figured it out, so maybe I can help. But I'm not sure if our situations are the same.

    My problem was that the data store had not finished loading when the GridPanel was loaded, so all I did was listen for the "load" event of the data store to refresh the GridPanel. Again, not sure if it's exactly the same, but here's the code that I used at the end of Ext.onReady(....:

    Code:
    store.on({
            'load': {
                fn: function() {
                    form.getView().refresh();
                }
            }
        })
    Hope that helps, and sorry if it doesn't.

    - Brian

  4. #4
    Ext User
    Join Date
    Jan 2011
    Location
    Chicago, IL
    Posts
    5

    Default

    Quote Originally Posted by b.squared View Post
    Code:
    store.on({
            'load': {
                fn: function() {
                    form.getView().refresh();
                }
            }
        })
    You might call render() instead of getView().refresh(). I just looked and the docs didn't list getView() as a method of FormPanel.

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    11

    Default

    Yeah, I'm not too sure what to do... I don't think I have seen any examples/tutorials about dynamically generating FormPanels based on data returned by a store.

    I don't think I can call render() because my FormPanel is in a ViewPort (as opposed to being rendered to a HTML element). Not sure if I can call onRender?

    Here's what I'm doing (skipping the gory details):
    Code:
    MyPanel = Ext.extend(Ext.form.FormPanel, {
        initComponent: function() {
            this.store = new Ext.data.Store({
                ....
                listeners: {
                    load: {
                        fn: buildForm
                    }
                }
            });
    
            function buildForm(store, data, options) {
                var obj = this.scope; // just for convenience
    
                ... create widgets ....
    
                obj.items = [widgetsCreated];
    
                MyPanel.superclass.initComponent.call(obj);
    
                MyPanel.superclass.onRender.call(obj, obj.ownerCt); // i want the form to render now, after I finished adding all of the widgets (after the data store has finished loading)
            }
        }
    });

  6. #6
    Ext User
    Join Date
    Jan 2011
    Location
    Chicago, IL
    Posts
    5

    Default

    I was looking through FormPanel and saw the method 'doLayout()', which apparently is what you're supposed to call instead of render() for a Container (I think).

    So I guess instead of:

    Code:
    MyPanel.superclass.onRender.call(obj, obj.ownerCt);
    You may want to try

    Code:
    MyPanel.doLayout();
    Hope that helps, but I am a noob.

  7. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    11

    Default

    Yeah, I tried that too... no go :-(

    Any other ideas?

  8. #8

    Default

    I did something like that using a tree panel, so my viewport was using a border layout. in left side was my tree panel and in the right side (region:center) was a panel that i used as a container, so depending on what option you choose on the tree panel, it added the panel asigned to that option to the container.

    So what i did was something like this:

    PHP Code:
        var prn Ext.getCmp(idPanelPrn); //I get the container
        
    prn.removeAll();//here i remove the last panel oin the container
        
    prn.add(panel);//here i add the panel (in your case form panel) to the container
        
    prn.doLayout();//And here a force a layout to render the panel i just added 
    I hope you find useful this example.

    See you.

Similar Threads

  1. Component not rendering?
    By jadrake75 in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 17 Jul 2009, 7:58 PM
  2. Component not rendering on page
    By glolar in forum Community Discussion
    Replies: 7
    Last Post: 25 May 2008, 5:44 PM
  3. Callback for TreeNode rendering
    By dfenwick in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 28 Jun 2007, 5:31 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
  •