Ext.data.Store.loadRawData reading only last record - json

Question

I am trying to read a JSON response into Ext.grid.Panel using Ajax . However, Grid is showing only last record out of 5 results, can anyone please help:
JSON Response:
{"tweets":[{"text":"T 1156 -On #KBC the 1 crore winner Taj Mohammed Rangrez ... requires great maturity and guts to leave #KBC at 1crore and 2 lifelines unused","date":"1379273177","user":"\/SrBachchan","id":"145125358"},{"text":"T 1156 -Taj Mhammed Rangrez wins 1 crore rupees at #KBC .. what a game he played .. and he, such a beautiful human !! write in to #KBC","date":"1379272401","user":"\/SrBachchan","id":"145125358"},{"text":"T 1156 -SO ... what did you think of the 1st Crorepati winner on #KBC ... send in your comments to me through the #KBC tag .. love ya !!","date":"1379272302","user":"\/SrBachchan","id":"145125358"},{"text":"T 1156 -The last 2 tweets should have been numbered T 1156 ... apologies !!","date":"1379272226","user":"\/SrBachchan","id":"145125358"},{"text":"T 1155 -Ashok Chakradhar writes : \u092a\u094d\u0930\u0936\u094d\u0928 2. \u0905\u0928\u093e\u0921\u093c\u0940 \u091c\u0940, \u0906\u091c\u0915\u0932 \u0926\u0942\u0938\u0930\u094b\u0902 \u0915\u093e \u092d\u0932\u093e \u0915\u0930\u0928\u0947 \u0935\u093e\u0932\u094b\u0902 \u0915\u094b \u092c\u0947\u0935\u0915\u0942\u092b \u0938\u092e\u091d\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0964 (cont) http:\/\/tl.gd\/n_1rmfn3e ","date":"1379270895","user":"\/SrBachchan","id":"145125358"}]}
Ext Code:
var tweetModel = Ext.define('Tweet', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string' },
{ name: 'date', type: 'string' },
{ name: 'user', type: 'string' },
{ name: 'id', type: 'string' }
]
});
var v= Ext.create('Ext.data.Store', {
model: tweetModel,
proxy: {
type: 'ajax',
url: '',
reader: {
type: 'json',
root: 'tweets'
}
}
});
var trailerPanel= Ext.create('Ext.grid.Panel', {
title: 'Tweets List',
store: v,
columns: [
{text: 'Text', dataIndex:'text',filterable: true},
{text: 'Date', dataIndex:'date',filterable: true},
{text: 'User', dataIndex:'user',filterable: true},
{text: 'ID', dataIndex:'id',filterable: true}
],
width: 1000,
forceFit: true,
});
var frmTrailerPanel = Ext.create('Ext.form.Panel', {
title: 'Hashtag Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
itemId:'hashtag',
name: 'hashtag',
fieldLabel: 'Enter Hashtag',
allowBlank: false // requires a non-empty value
}
],
//renderTo:ext.getBody(),
buttons: [{
text: 'Search',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: '../../assignment/index.php',
waitMsg: 'Fetching tweets...',
success: function(form, action) {
},
failure: function(form, action) {
var myData = Ext.JSON.decode(action.response.responseText);
v.loadRawData(myData,true);
trailerPanel.render(Ext.getBody());
}
});
}
}
}
]
});
Output:

Answer 1

That is because all 5 have the same id value.