企業のデータを 4 つのタブに保存する Web サイトを開発しました。サイトは、パネルとテキストボックスを含むタブから始まります。
「Kontakte」タブに切り替えると、表示されるグリッドはこのように正しく表示されます
タブを再度切り替えると (この場合は "Veranstaltungen" タブに)、新しいタブのグリッドが正しく表示されません。
列のサイズとデータが正しくありません。ご覧のとおり、「Nachname」列が 2 回表示されていますが、最初の列のヘッダーは「Vorname」である必要があります。さらに、グリッドの forcefit-property が「true」に設定されているにもかかわらず、最初の列の幅が正しくないようです。
最初に「Veranstaltungen」タブに切り替えてから「Kontakte」タブに切り替えると、非常によく似たエラーが発生します。「Veranstaltungen」タブのグリッドは正しくなりましたが、「Kontakte」タブの列のサイズとデータが正しくありません。繰り返しますが、最初の列のサイズとヘッダーが正しくありません ("Anrede" のはずです)。
つまり、最初に表示されたタブのグリッドは正しく、2 番目に表示されたタブのグリッドは正しくありません。このエラーが発生する理由を知っている人はいますか?
div にレンダリングされるパネルには、見出しと tabwidget が含まれます。他の列が正しく表示されない場合があるため、最初の列の構成が問題の原因ではないようです。さらに、店舗が空の場合、2 番目に表示されるタブとグリッドが正しく表示されます。
最後に、何が問題だと思いますか？
パトリック・ケルシュバウム、すべてのアドバイスに感謝します
「Kontakte」ストアとグリッドのコード:
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」ストアとグリッドのコード:
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"
}
});