Question

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

当我切换到“Kontakte”选项卡时，显示的网格正确显示为this

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

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

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

总之，首先显示的选项卡中的网格是正确的，但第二个显示选项卡中的网格不正确。有谁知道为什么会出现这种错误？

呈现给div的面板包含标题和tabwidget。有时会发生其他列没有正确显示，所以看起来第一列的配置不是问题的原因。此外，如果商店为空，则会正确显示第二个显示的选项卡和网格。

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

每个建议都是如此，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"
    }
});

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

我遇到了同样的问题。

结果是声明为double的id，就像它们在你的代码中一样。

除id: Ext.id()以外，您不应手动分配ID。

ExtJS 4网格列错误

1 个答案: