PDA

View Full Version : ArrayReader and MemoryProxy example



Bunneh
2 Aug 2011, 5:52 AM
I am currently trying to reproduce Jay's examples from his book as I am learning Ext JS 3. Before the current point everything went fine, but I can not run an example which starts at page 159. Here is my code:

var arrayData = [
['Jay Garcia', 'MD'],
['Aaron Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Stein', 'DE'],
['Bryan Shanley', 'NJ'],
['Nyri Selgado', 'CA']];

var nameRecord = Ext.data.Record.create([
{
name: 'fullName', //name
mapping: 0 //1
},
{
name: 'state',
mapping: 1 //2
}]);

var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

var memoryProxy = new Ext.data.MemoryProxy(arrayData);

var store = new Ext.data.Store(
{
reader: arrayReader,
proxy: memoryProxy
});

//var store = new Ext.data.ArrayStore(
//{
// data: arrayData,
// fields: ['fullName', 'state']
//});

var colModel = new Ext.grid.ColumnModel([
{
header: 'Full Name',
sortable: true,
dataIndex: 'fullName'
},
{
header: 'State',
dataIndex: 'state'
}]);

var gridView = new Ext.grid.GridView();

var selModel = new Ext.grid.RowSelectionModel(
{
singleSelect: true
});

Ext.onReady(function ()
{
Ext.QuickTips.init();

new Ext.Viewport(
{
items: new Ext.grid.GridPanel(
{
title: 'Our first grid',
autoHeight: true,
width: 250,
store: store,
view: gridView,
colModel: colModel,
selModel: selModel
})
}).show();
});

If I uncomment the reassignment of store variable everything works fine, otherwise there is no data in the grid. Please, help me to understand what am I doing wrong.

VinylFox
2 Aug 2011, 11:00 AM
The data needs to be 'loaded' into the store, either using the 'data' property of the store config or via the loadData method of the instantiated store.

Bunneh
3 Aug 2011, 12:16 AM
var store = new Ext.data.Store(
{
reader: arrayReader,
//proxy: memoryProxy,
data: arrayData
});

Thanks, this change has fixed my problem but actually there is no need to specify the proxy then. In Jay's example we pass our data to the memory proxy and then pass this proxy to the store. It seems to be enough. Isn't it? Or what is the point of using memory proxy then? Thanks for your answers!

Bunneh
3 Aug 2011, 1:12 AM
And actually I am currently experiencing the same problem with another Jay's example. May be I have made some errors during the typing but the result is the same - I see no data although the grid view is displayed properly:


var recordFields = [
{ name: 'id', mapping: 'id' },
{ name: 'firstname', mapping: 'firstname' },
{ name: 'lastname', mapping: 'lastname' },
{ name: 'street', mapping: 'street' },
{ name: 'city', mapping: 'city' },
{ name: 'state', mapping: 'state' },
{ name: 'zip', mapping: 'zip' },
{ name: 'country', mapping: 'country' }];

var remoteJsonStore = new Ext.data.JsonStore(
{
fields: recordFields,
url: 'http://extjsinaction.com/dataQuery.php',
totalProperty: 'totalCount',
root: 'records',
id: 'ourRemoteStore',
autoLoad: false,
remoteSort: true
});

var colorTextBlue = function (id)
{
return '<span style="color: #0000FF">'+id+'</span>'
};

var stylizeAddress = function (street, column, record)
{
var city = record.get('city');
var state = record.get('state');
var zip = record.get('zip');

return String.format('{0}<br />{1} {2}, {3}', street, city, state, zip);
}

var columnModel = [
{
header: 'Id',
dataIndex: 'id',
sortable: true,
width: 50,
resizable: false,
hidden: true,
renderer: colorTextBlue
},
{
header: 'Last Name',
dataIndex: 'lastname',
sortable: true,
hideable: false,
width: 75
},
{
header: 'First Name',
dataIndex: 'firstname',
sortable: true,
hideable: false,
width: 75
},
{
header: 'Address',
dataIndex: 'street',
sortable: false,
id: 'addressCol',
rendered: stylizeAddress
},
{
header: 'Country',
dataIndex: 'country',
sortable: true,
width: 150
}];

var pagingToolbar =
{
xtype: 'paging',
store: remoteJsonStore,
pageSize: 50,
displayInfo: true
};

var grid =
{
xtype: 'grid',
border: false,
columns: columnModel,
store: remoteJsonStore,
loadMask: true,
bbar: pagingToolbar,
autoExpandColumn: 'addressCol'
};

Ext.onReady(function ()
{
Ext.QuickTips.init();

new Ext.Window(
{
height: 350,
width: 550,
border: false,
layout: 'fit',
items: grid,

listeners:
{
afterrender: function ()
{
Ext.StoreMgr.get('ourRemoteStore').load(
{
params:
{
start: 0,
limit: 50
}
});
}
}
}).show();
});

And I have found the solution again:

var remoteJsonStore = new Ext.data.JsonStore(
{
fields: recordFields,
//url: 'http://extjsinaction.com/dataQuery.php',
totalProperty: 'totalCount',
root: 'records',
id: 'ourRemoteStore',
autoLoad: false,
remoteSort: true,

proxy: new Ext.data.ScriptTagProxy(
{
url: 'http://extjsinaction.com/dataQuery.php'
})
});

But I do not understand why Jay's code does not work. Ext JS 3.4 is not backward compatible with other 3.x versions?

VinylFox
3 Aug 2011, 11:25 AM
The reason your fist chunk of code did not work is because the default proxy for Ext.data.JsonStore is a Ext.data.HttpProxy which will not work with the cross domain URL you specified.

Bunneh
3 Aug 2011, 11:51 AM
Okay, I see. But Jay said that it should automatically pick the proper proxy based on the url (as it is an external one). Maybe some things changed, I don't know.

VinylFox
3 Aug 2011, 12:07 PM
Yeah, I see that he says that on page 13 of chapter 7 - he was probably just thinking of something else.

The code for JsonStore is quite straight forward in the way it creates the proxy:


if((this.url || this.api) && !this.proxy){
this.proxy = new Ext.data.HttpProxy({url: this.url, api: this.api});
}

That will always create a HttpProxy.

Bunneh
4 Aug 2011, 12:05 AM
Thanks for your response. But I still wonder what is the point of using the MemoryProxy if it does not bind any data (rolling back to the first question)?

Bunneh
5 Aug 2011, 12:08 AM
As there are still no answers I guess it's kind of bug.

lemlich
30 Sep 2011, 10:29 AM
I tried the example, and after I added a store.load(), the grid was populated. But if I comment out the proxy: memoryProxy line, it doesn't work.

Was that the only change you made?

lemlich
30 Sep 2011, 11:01 AM
I noticed that when you replace Ext.data.Store with Ext.data.ArrayStore, you must use loadData() and can't use load(). That's because, instead of using MemoryProxy, ArrayStore does its own thing inside loadData().

I like Jay's example because your code that loads the store doesn't have to know what kind of store it is. If you specify a proxy, you can always invoke store.load()

(I hope and pray)