Hi,

In my application i am having a window and it contains a form with near about 50 fields. The window opens by a click on a column of a grid .... and get filled by the grid row values.

for the column i am using a small plugin .... The issue is that ..... the form is taking too much time to open in Firefox .... and its not getting opened in IE.

#Update Column Plugin
Code:
function disableFields(comp){
    comp.getComponent('project_no').disable();
    comp.getComponent('project_name').disable();
    comp.getComponent('description').disable();
    comp.getComponent('lob').disable();
    comp.getComponent('domain').disable();
    comp.getComponent('aop_line_item').disable();
    comp.getComponent('aop_year').disable();
}


CompleteColumn = function(){
    var grid;

    function getRecord(t){
        var index = grid.getView().findRowIndex(t);
        return grid.store.getAt(index);
    }
    function onClick(e, t){
       
        grid.getEl().mask();
        //create user.Form instance (@see UserForm.js)
        var userForm = new App.user.Form({
            listeners: {               
                update : function(fpanel, record) {                                   
                   
                }
            }
        });
        userForm.buttons[1].disable();
        disableFields(userForm.getComponent('pj_details'));
                       
        var win = new Ext.Window({
            title: 'Update Project',
            frame: true,
            closable:true,
            width:700,
            height:500,
            layout:'fit',
            plain:true,
            listeners: {
                beforeclose : function(P){
                    grid.getEl().unmask();
                }
            },
            items: [userForm]
        });

        win.show(this);
        userForm.loadRecord(getRecord(t));
       
    }
   
    Ext.apply(this, {
        width: 26,
        header: '<div class="update-col-hd"></div>',
        menuDisabled:true,
        fixed: true,
        id: 'task-col',
        renderer: function(){
            return '<div class="update-col"></div>';
        },
        init : function(xg){
            grid = xg;
            grid.on('render', function(){
                var view = grid.getView();
                view.mainBody.on('click', onClick, this, {delegate: '.update-col'});
            });
        }
    });
};
#My Form
Code:
Ext.ns('App', 'App.user');
/**
 * @class App.user.FormPanel
 * A typical FormPanel extension
 */
App.user.Form = Ext.extend(Ext.form.FormPanel, {
    labelWidth: 250,
    bodyStyle:'padding:5px 5px 5px 5px',
    frame: true,  
    autoScroll: true,
    defaultType: 'textfield',
    defaults: {
        anchor: '95%'
    },

    // private A pointer to the currently loaded record
    record : null,

    /**
     * initComponent
     * @protected
     */
    initComponent : function() {
        // build the form-fields.  Always a good idea to defer form-building to a method so that this class can
        // be over-ridden to provide different form-fields
        this.items = this.buildForm();

        // build form-buttons
        this.buttons = this.buildUI();

        // add a create event for convenience in our application-code.
        this.addEvents({
            /**
             * @event create
             * Fires when user clicks [create] button
             * @param {FormPanel} this
             * @param {Object} values, the Form's values object
             */
            create : true,
            update : true
        });

        // super
        App.user.Form.superclass.initComponent.call(this);
    },

    /**
     * buildform
     * @private
     */
    buildForm : function() {
        return [
           
            {
                xtype:'fieldset',
                itemId: 'pj_details',
                title: 'Project Details',               
                //collapsible: true,
                autoHeight:true,
                defaults: {anchor: '100%'},
                defaultType: 'textfield',
                items :[
                      ## My Fields
            ]
            },
           
            {
                xtype:'fieldset',
                title: 'Risk',               
                autoHeight:true,
                defaults: {anchor: '100%'},
                defaultType: 'textfield',
                items :[
                       ## My Fields                   
                    ]
            },
           
            {
                xtype:'fieldset',
                title: 'Toll Gate',               
                autoHeight:true,
                defaults: {anchor: '100%'},
                defaultType: 'textfield',
                items :[
                        ## My Fields
                    ]
            },
           
            {
                xtype:'fieldset',
                title: 'Budget',               
                autoHeight:true,
                defaults: {anchor: '100%'},
                defaultType: 'textfield',
                items :[                   
                        ## My Fields
                    ]
            },
            {
                xtype:'fieldset',
                title: 'Benefits',               
                autoHeight:true,
                defaults: {anchor: '100%'},
                defaultType: 'textfield',
                items :[                   
                        ## My Fields
                    ]
            },
           
          
        ];
    },

    /**
     * buildUI
     * @private
     */
    buildUI: function(){
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onUpdate,
            scope: this
        }, {
            text: 'Create',
            iconCls: 'silk-user-add',
            handler: this.onCreate,
            scope: this
        }];
    },

    /**
     * loadRecord
     * @param {Record} rec
     */
    loadRecord : function(rec) {
        this.record = rec;
        this.getForm().loadRecord(rec);
    },

    /**
     * onUpdate
     */
    onUpdate : function(btn, ev) {
        if (this.record == null) {
            return;
        }
        if (!this.getForm().isValid()) {
            App.setAlert(false, "Form is invalid.");
            return false;
        }      
        this.fireEvent('update', this, this.record);
        this.getForm().updateRecord(this.record);       
    },

    /**
     *onCreate
     */
    onCreate : function(btn, ev) {
        if (!this.getForm().isValid()) {
            App.setAlert(false, "Form is invalid");
            return false;
        }
        this.fireEvent('create', this, this.getForm().getValues());
        this.getForm().reset();
    }
});
Any idea regarding this issue ?


Thanks,
Sidd