ExtJS 4網格列錯誤

Question

我開發了一個網站，可以在四個選項卡中保存公司的一些數據。 該網站從包含面板和文本框的選項卡開始。

當我切換到「Kontakte」 -Tab出現的網格顯示正確：

http://www.pictureupload.de/originals/pictures/260912152422_2_companies_kontakte_tab_correct.JPG

當我再次切換選項卡（在這種情況下的「Veranstaltungen」 -Tab），則新選項卡中的網格顯示不正確。

http://www.pictureupload.de/originals/pictures/260912152516_3_companies_veranstaltungen_tab_error.JPG

的大小和列的數據不正確。正如你可以看到列「Nachname」顯示兩次，但第一列的標題應該是「Vorname」。此外，儘管網格的forcefit屬性設置爲「true」，但第一列的寬度似乎不正確。

當我首先切換到「Veranstaltungen」選項卡，然後切換到「Kontakte」選項卡時，會出現非常類似的錯誤。現在「Veranstaltungen」選項卡的網格是正確的，但「Kontakte」選項卡中列的大小和數據不正確。同樣，第一列的大小和標題不正確（應該是「Anrede」）。

總之，首先顯示的標籤中的網格是正確的，但第二個顯示的標籤中的網格不正確。有誰知道爲什麼會出現這個錯誤？

呈現給div的面板包含標題和tabwidget。 有時會出現其他列沒有正確顯示的情況，所以看起來第一列的配置對此問題不負責任。此外，如果商店是空的，第二個顯示的選項卡和網格顯示正確。

那麼，最後，你認爲是什麼問題？

THX每一個建議，帕特里克Kerschbaum

的 「Kontakte」 -store和-grid的代碼：

var companyContactsData = new Ext.data.Store({ 
     proxy: new Ext.data.HttpProxy({ 
      type: 'ajax', 
      url: 'detailCompanies_contacts_getData.php?un_id='+un_id+'', 
       reader: { 
       type: 'json', 
       idProperty: 'ko_vorname' 
      }, 
      writer: new Ext.data.JsonWriter({ 
       encode: false, 
       listful: false, 
       writeAllFields: false 
      }) 
     }), 

     fields: ['ko_id', 'ko_anrede','ko_titel','ko_vorname','ko_nachname','ko_email1','ko_telg1','funktionen'] 
    }); 
    companyContactsData.load(); 


    var companyContactsGrid = new Ext.grid.GridPanel({ 
     store: companyContactsData, 
     title: 'Kontakte', 
     width: 1000, 
     padding: 10, 
     frame: true, 
     autoHeight: true, 
     forceFit: true, 

     columns: [ 
      { id: 'ko_id', header: 'ko_id', dataIndex: 'ko_id', hidden: true}, 
      { id: 'ko_anrede', header: 'Anrede', dataIndex: 'ko_anrede', sortable: true, width:50}, 
      { id: 'ko_titel', header: 'Titel', dataIndex: 'ko_titel', sortable: true, width:50}, 
      { id: 'ko_nachname', header: 'Nachname', dataIndex: 'ko_nachname', sortable: true}, 
      { id: 'ko_vorname', header: 'Vorname', dataIndex: 'ko_vorname', sortable: true}, 
      { id: 'funktionen', header: 'Funktionen', dataIndex: 'funktionen', sortable: true}, 
      { id: 'ko_telg1', header: 'Telg1', dataIndex: 'ko_telg1', sortable: true}, 
      { id: 'ko_email1', header: 'Email1', dataIndex: 'ko_email1', sortable: true}, 
      { 
       xtype:'actioncolumn', 
        width: 50, 
       items: [<?php if($_SESSION['ko_detail']) { ?>{ 
        icon: 'pics/information.png', 
        tooltip: 'Zur Kontakt-Detailansicht wechseln', 
        handler: function(grid, rowIndex, colIndex) { 
         var rec = grid.getStore().getAt(rowIndex); 
         var kontaktid = rec.get('ko_id'); 
         var url = "../../manageContacts/detailContacts/detailContacts.php?ko_id=" + kontaktid; 
         top.location.href = url; 
        } 
       }<?php } ?>] 
      } 
     ], 

     style: { 
      "vertical-align": "middle", 
      "text-align": "left" 
      } 
    }); 

的 「Veranstaltungen」 -store的代碼和-grid：

var companyEventsData = new Ext.data.Store({ 
      proxy: new Ext.data.HttpProxy({ 
       type: 'ajax', 
       url: 'detailCompanies_events_getData.php?un_id='+un_id+'', 
        reader: { 
        type: 'json', 
        idProperty: 'ko_anrede' 
       }, 
       writer: new Ext.data.JsonWriter({ 
        encode: false, 
        listful: false, 
        writeAllFields: false 
       }) 
      }), 

      fields: ['v_id', 'v_eingabedatum','v_name','v_teilgenommen','v_eingeladen','ko_vorname','ko_nachname','kv_eingeladen','kv_teilgenommen','kv_bemerkung'] 
     }); 
     companyEventsData.load(); 


     var companyEventsGrid = new Ext.grid.GridPanel({ 
      store: companyEventsData, 
      title: 'Veranstaltungen', 
      width: 1000, 
      padding: 10, 
      frame: true, 
      autoHeight: true, 
      forceFit: true, 

      columns: [ 
       { id: 'v_id', dataIndex: 'v_id', hidden: true}, 
       { id: 'ko_vorname', header: 'Vorname', dataIndex: 'ko_vorname', sortable: true}, 
       { id: 'ko_nachname', header: 'Nachname', dataIndex: 'ko_nachname', sortable: true}, 
       { id: 'kv_eingeladen', header: 'Eingeladen', dataIndex: 'kv_eingeladen', sortable: true}, 
       { id: 'kv_teilgenommen', header: 'Teilgenommen', dataIndex: 'kv_teilgenommen', sortable: true}, 
       { id: 'kv_bemerkung', header: 'Bemerkung', dataIndex: 'kv_bemerkung', sortable: true}, 
       { id: 'v_eingabedatum', header: 'Datum', dataIndex: 'v_eingabedatum', sortable: true}, 
       { id: 'v_name', header: 'Name', dataIndex: 'v_name', sortable: true}, 
       { id: 'v_teilgenommen', header: 'Teilnehmeranzahl', dataIndex: 'v_teilgenommen', sortable: true}, 
       { id: 'v_eingeladen', header: 'Eingeladene', dataIndex: 'v_eingeladen', sortable: true} 
      ], 

      style: { 
       "vertical-align": "middle", 
       "text-align": "left" 
       } 
     }); 

守則tabwidget的：

var tabs = Ext.createWidget('tabpanel', { 
      activeTab: 0, 
      width: 1000, 
      plain: true, 
      defaults :{ 
       autoScroll: true, 
      }, 
      items: [companyBasicDataPanel, companyContactsGrid, companyClassificationsGrid, companyEventsGrid] 
      }); 

主面板代碼：

var detailCompanies_panel = new Ext.Panel({ 
      renderTo: 'content', 
      autoHeight: true, 
      bodyBorder: false, 
      border: 0, 
      cls: 'my-component', 
      width: 1000, 

      items: [untz1_label, tabs], 

      style: { 
       "margin-left": "auto", 
       "margin-right": "auto" 
       } 
     }); 

Answer 1

我遇到了同樣的問題。 發現id的聲明爲double，因爲它們在您的代碼中。爲提Ext.id Ext.id（）:)