Extjs表單無法正確加載

Question

當顯示我們的表單時，字段（文本字段，下拉列表..etc）將重疊。 如果我們第二次關閉，則說明它們已正確加載。 有人可以為此建議解決方案嗎？

我們正在使用Extjs版本4。請查看下面給出的代碼：

這是當我們單擊一個網格上的操作列按鈕時執行的代碼：

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

---

這是我們正在showUpdateForm方法中加載的表單...我僅在表單中提供一項。 但是還有更多與此類似的字段。

    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

不要將margins屬性與style屬性中的margins一起使用，而只能使用margins: '0 20 10 20',

不能說發生了什么，但是事實是ExtJS在第一次渲染時無法確定正確的布局。 組件中最有可能導致此問題的問題。

您可以嘗試的是：

• 嘗試將配置僅插入容器中，或者
• 調用suspendLayouts創建表單，然后前resumeLayouts您插入表格后到它的容器

對於任何進一步的幫助，我仍然需要有關您的表格或放置位置的更多信息。 我猜是放在一個容器里嗎？

順便說一句。 您的win變量保持未定義狀態。