1

我开发了一个网站，将公司的一些数据保存在四个选项卡中。该站点从一个包含面板和文本框的选项卡开始。

当我切换到“Kontakte”选项卡时，出现的网格会像这样正确显示

当我再次切换选项卡（在本例中为“Veranstaltungen”-选项卡）时，新选项卡中的网格显示不正确。

列的大小和数据不正确。如您所见，“Nachname”列显示了两次，但第一列的标题应为“Vorname”。此外，尽管网格的 forcefit-property 设置为“true”，但第一列的宽度似乎不正确。

当我首先切换到“Veranstaltungen”-选项卡，然后切换到“Kontakte”-选项卡时，会发生非常类似的错误。现在“Veranstaltungen”选项卡的网格是正确的，但“Kontakte”选项卡中列的大小和数据不正确。同样，第一列的大小和标题不正确（应该是“Anrede”）。

总而言之，第一个显示的选项卡中的网格是正确的，但第二个显示的选项卡中的网格是不正确的。有谁知道为什么会发生这个错误？

呈现给 div 的面板包含标题和标签小部件。有时会发生其他列未正确显示的情况，因此第一列的配置似乎与问题无关。此外，如果商店为空，则显示的第二个选项卡和网格将正确显示。

所以，最后，你认为问题是什么？

感谢每一个建议，Patrick 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"
    }
});

标签小部件的代码：

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"
     }
 });
4

1 回答 1

2

我遇到了同样的问题。

原来 id 的声明为 double，因为它们在您的代码中。

除了 from 之外，您永远不应该手动分配 ID id: Ext.id()。

于 2013-02-12T09:37:02.263 回答