Question

I have a screen where the formBase contains all of the dynamically created UI controls. I am using card layout and switching between views. Now it so happened that I have to execute the formBase for each time the card switches (I mean for each time my screen appears).

I have used the beforeshow listeners for form to achieve that. But its not working. Below is my code.

var formBase = new Ext.form.FormPanel({
        scroll: 'vertical',
        ui: 'round',
        items: [fieldSet, {
            xtype : 'fieldset',
            items : [ item1, item2, item3]
            ]
        }],
         listeners: {
            beforerender: function(ele) {
               console.log(" Screen before render");
               initScreenComps()
            },

            beforeshow: function(ele) {
                console.log(" screen before show");

            }
        }
    });

Edit:1

I have a viewport.js file, where i have reveal method to change the viewport. here is the below code of Viewport.js. Still it has no effect. pls suggest.

MyApp.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    initComponent: function() {
        Ext.apply(this, {

            items: [
                { xtype: 'MyApp.views.view1', id: 'view1' },
                { xtype: 'MyApp.views.view2', id: 'view2' },
                { xtype: 'MyApp.views.view3', id: 'view3' },
                { xtype: 'MyApp.views.view4', id: 'view4' },
                { xtype: 'MyApp.views.view5', id: 'view5' }             
            ],
        listeners:{
           beforecardswitch:function(newCard, oldCard, index, animated){
                 //do something...
               console.log(" Card switched"  + " New " + newCard + " OLD : " + oldCard + " index + " index);
           }
        }
        }
        );
        MyApp.views.Viewport.superclass.initComponent.apply(this, arguments);
    },

    // used for changing view port of application
    reveal: function(target) {      
        this.setActiveItem(MyApp.views[target],{ type: 'slide', direction: 'right' }
        );
    }
});

And now i am calling view2 from the controller, on button click event.

MyApp.views.viewport.reveal('view2');

Answer 1

I think, it will be best if you use “beforeactivate” or “activate” event listeners for it. These events get fired whenever the card layout sets this item as the active item. So, the code will be like this:

var formBase = new Ext.form.FormPanel({
        scroll: 'vertical',
        ui: 'round',
        items: [fieldSet, {
            xtype : 'fieldset',
            items : [ item1, item2, item3]
            ]
        }],
         listeners: {
            beforeactivate: function(panel) {
               console.log(" Screen before render");
               initScreenComps()
            }
        }
    });