ExtJS 4 proxy Store don't consumes delivered data - rest

Question

I have two grids with a own proxy store each. Each store is bound to the same model with the following definition:
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'
}]
});
The stores their grids and the related container buttons etc. are created in a function. The 2 functions looks like:
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
}
};
and:
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
}
};
As you can see the 2 panels are manly the same. When I load the page the request is started automaticly cause the stores have auto load set to true. Now the first store loads the data very well. All is fine and works like expected. What ever. The second store don't. I stalked it down to the following via firebug:
Store is created
store is bound correctly to proxy
the load function is called
data request is done
data looks perfectly like it should
I can inspect the answerd objects via firebug
Only the objects (which are in the browsers ) are not 'loaded' in the store. Store data items keep zero. Also after reload it again. I can't see the point here.
Something to mention: first store has around 50 items to hold the second one 220 or more. I tried to set the time out seeting for the proxy. Didn't help. I Also tried to switch the stores. Set store one to grid 2 and vice versa (it is steered by the extra params setting in the proxy). Only the store with the less amount of items loads well.
Does someone know this issue? I can't come to a conclusion for days now.

Answer 1

check out Proxy Configuration from Sencha's docs.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-cfg-totalProperty
and your json is not in valid json format, verify it in json viewers for errors.
EDIT: You can listen to exceptions thrown by the data reader: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-event-exception