Rendering component via callback

[joec2000]

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

[joec2000]

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.

[b.squared]

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(....:

store.on({
        'load': {
            fn: function() {
                form.getView().refresh();
            }
        }
    })

Hope that helps, and sorry if it doesn't.

- Brian

[b.squared]

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.

[joec2000]

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):

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

[b.squared]

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:

MyPanel.superclass.onRender.call(obj, obj.ownerCt);

You may want to try

MyPanel.doLayout();

Hope that helps, but I am a noob.

[joec2000]

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

Any other ideas?

[acuevas]

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:

    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.