Extjs Form is not loading properly

Question

When our form is shown, the fields (textfieds, drop down lists ..etc) are getting overlapped. if we close the for for second time, then they are properly loaded. can anyone suggest the solution for this?

we are using Extjs version 4. Please have a look at our code given below:

This is the code that executes when we click on an action column button on one grid:

   var rec = grid.getStore().getAt(rowIndex);
   var win;
   var invID=rec.get('arInvoiceId');
   var documentId=rec.get('id');
   // alert('invoiceID=='+invID);
   var datar = new Array();
   var jsonDataEncode = "";  
   Ext.define('SupportModel', {
       extend : 'Ext.data.Model',
       fields : [ {
           name : 'supportableType',
           mapping : 'properties["supportable.type"]'

       }],
       proxy : {
           type : 'ajax',
           url : 'support.htm',
           noCache: false,
           extraParams : {
               invoicdIdRef: documentId
           },
           reader : new Ext.data.JsonReader({
               root : 'results'
           })
       }

   });
   var storesupport = Ext.create('Ext.data.Store', {
       model : 'SupportModel',
       id : 'storesupport'
   });
   storesupport.load();

   storesupport.on('load', function(){
       var records = storesupport.getRange();

       for (var i = 0; i < records.length; i++) {

           datar[i] = records[i].get('supportableType');

       }

       showUpdateForm(rec, win,datar);

       Ext.getCmp('gridPnlForUpdate').getStore().load();
   });                               

---

This is the form we are loading in showUpdateForm method...I am providing only one item in the form. but there are more fields similar to that.

    var form = Ext.create('Ext.form.Panel', {
        autoScroll: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        border: false,
        bodyPadding: 10,
        fieldDefaults: {
            labelWidth: 100,
            labelStyle: 'font-weight:bold'
        },
        defaults: {
            margins: '0 0 10 0',
            style:{
                'margin-left':'20px',
                'margin-right':'20px'
            }   
        },
        items: [ 
                {
                    xtype: 'textfield',
                    fieldLabel: 'Author',
                    name: 'author',
                    id: 'author',
                    width: 150,
                    value: rec.get('author'),
                    hidden: true
            }

Answer 1

Don't use the margins property along with margins in the style property, just use one of both like margins: '0 20 10 20',.

What happend cannot be said but a fact is that ExtJS is unable to determine the correct layout at first rendering. Most likely you have a issue within the components which will cause this.

What you can try is:

• try to insert just the config into the container or
• calling suspendLayouts before you create the form and then resumeLayouts after you have inserted the form into it's container

For any further help I still need more info about your form or where it is placed to. I guess it is placed into a container?

And btw. your win variable stays undefined.