それぞれ独自のプロキシ ストアを持つ 2 つのグリッドがあります。各ストアは、次の定義で同じモデルにバインドされます。
Ext.define('Issue', {
extend: 'Ext.data.Model',
fields : [{
name : 'updated_on',
type : 'string'
}, {
name : 'done_ratio',
type : 'int'
}, {
name : 'start_date',
type : 'string'
}, {
name : 'subject',
type : 'string'
}, {
name : 'due_date',
type : 'string'
}, {
name : 'created_on',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'id',
type : 'int'
}, {
name : 'assigned_to',
mapping: 'assigned_to.name'
}, {
name: 'parked',
mapping: 'custom_fields[9].value',
type: 'boolean'
}]
});
ストアのグリッドと関連するコンテナー ボタンなどは、関数で作成されます。2 つの関数は次のようになります。
var createMyPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('my')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var myPanel = new Ext.Panel({
title: 'Meine Fälle',
padding: '0 5 0 5',
bl_id:'my',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : myPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
と：
var createAllPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('all')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zugewiesen an',
width : 200,
sortable : true,
dataIndex : 'assigned_to',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var allPanel = new Ext.Panel({
title: 'Alle Fälle',
padding: '0 5 0 5',
bl_id:'all',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : allPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
ご覧のとおり、2 つのパネルは同じ男らしいです。ページをロードすると、リクエストが自動的に開始され、ストアの自動ロードが true に設定されます。これで、最初のストアがデータを適切にロードします。すべて問題なく、期待どおりに動作します。なんでもいい。2 番目のストアはありません。firebugを介して次のように追跡しました：
- ストアが作成されます
- ストアはプロキシに正しくバインドされています
- ロード関数が呼び出されます
- データリクエストが完了しました
- データは本来あるべきように完全に見えます
- 回答されたオブジェクトをfirebugで検査できます
オブジェクト (ブラウザにある) のみがストアに「ロード」されません。ストア データ項目はゼロのままです。また、再度リロードした後。ここでポイントがわかりません。
特筆すべき点: 最初のストアには約 50 のアイテムがあり、2 番目のストアには 220 以上のアイテムがあります。プロキシのタイムアウトを設定しようとしました。役に立ちませんでした。私も店を変えてみました。ストア 1 をグリッド 2 に設定し、その逆も同様です (プロキシの追加のパラメーター設定によって操作されます)。アイテムの量が少ないストアのみが適切に読み込まれます。
誰かがこの問題を知っていますか？何日経っても結論が出ません。