How can I get an item from a string array loaded in a store?

[Andrei Nicusan]

Hi, everybody!

I want to load an array of strings in a store, using a model. The problem here is that I don't know how to configure the model, especially its field set, so that I can have the strings in there (one string per model instance). When dealing with POJOs serialized to JSON, it is pretty straightforward, because I know how the fields of that POJO are called.


Let me show you two examples that may reveal the difference:

1.

serializing an array of KeyValueDTOs:
[{key : "key1", value : "value1"},
{key : "key2", value : "value2"}]

In the corresponding ExtJS model I have: ...fields : ['key', 'value'] and everything works fine when loading into the associated store.

2.

serializing an array of strings:
["S1", "S2"]


I need such string lists to be data providers for some combo boxes.

What's the right model configuration for this??? There's no field I can map. It seems to be something that common to get a list of strings from the server that I expect it to be supported somehow in the ExtJS MVC approach. Maybe it's too much in plain sight for me to find it.

Thank you in advance.

[tvanzoelen]

See this sample, the main thing is I think to leave the mapping property out of the model.



Ext.onReady(function() {

var arrayStore = [
[1, '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
[2, 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
[3, 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
[4, 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
[5, 'American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
[6, 'AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
[7, 'Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
[8, 'Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
[9, 'Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
[10, 'E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
[11, 'Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
[12, 'General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
[13, 'General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
[14, 'Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
[15, 'Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
[16, 'Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
[17, 'International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
[18, 'Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
[19, 'JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
[20, 'McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
[21, 'Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
[22, 'Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
[23, 'Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
[24, 'The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
[25, 'The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
[26, 'The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
[27, 'United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
[28, 'Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
[29, 'Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

Ext.define('mymodel', { extend: 'Ext.data.Model', idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'category', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'preview', type: 'string' },
{ name: 'testje', type: 'float' },
{ name: 'description', type: 'string'}]
});


var store = Ext.create('Ext.data.ArrayStore', {
model: 'mymodel',
data: arrayStore
});

var columnmodel = new Array(
[
{ header: 'ID', width: 100, hidden: false, sortable: true, dataIndex: 'id' },
{ header: 'Category', width: 100, hidden: false, sortable: true, dataIndex: 'category' },
{ header: 'Name', width: 100, hidden: false, sortable: true, dataIndex: 'name' },
{ header: 'Preview', width: 100, hidden: false, sortable: true, dataIndex: 'preview' },
{ header: 'testje', width: 100, hidden: false, sortable: true, dataIndex: 'testje' },
{ header: 'Description', width: 100, hidden: false, sortable: true, dataIndex: 'description'}]);





var gridje = Ext.create('Ext.grid.Panel', { id: 'gridje', viewConfig: { id: 'gridview4'

}, autoScroll: true, columns: columnmodel, store: store, height: 500, width: 500
});


var panel = Ext.create('Ext.panel.Panel', { id: 'panel3', layout: 'fit', height: 500, width: 500, split: true, items: [gridje] });


var viewport = Ext.create('Ext.container.Viewport', { title: 'ASLAS', layout: 'fit', renderTo: Ext.getBody(), items: [panel] });


});

[tvanzoelen]

Or leave the model out and define the fields directly on the store



var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'id', type: 'integer' },
{ name: 'category', type: 'string' },
{ name: 'name', type: 'float' },
{ name: 'preview', type: 'float' },
{ name: 'testje', type: 'float' },
{ name: 'description', type: 'date' }
],

data: arrayStore
});

[Andrei Nicusan]

Thanks for answering, but I have a more particular case, where I have an array of strings. How would you rewrite your sample, if the arrayStore was like this:


var arrayStore = ['3m Co', 'Alcoa Inc', 'Altria Group Inc' 'American Express Company', 'American International Group, Inc.', 'AT&T Inc.', 'Boeing Co.', 'Caterpillar Inc.', 'Citigroup, Inc.', 'E.I. du Pont de Nemours and Comp']?

I tried to define the following 'fields' property on my model:


fields : [{name : 'text',
type : 'string',
convert : function(v, rec){
return rec;
}}]

, but the convert function always returns '[object Object]', instead of the actual string representation (e.g. '3m Co'), as I expected.

[tvanzoelen]

What field is defined in that rec? Maybe you can do rec.name?

I think the format to load into the ArrayStore is [[],[]] then I would rewrite [['str1'], ['str2']]

But what is then your value field and your displayfield in the combobox?

[Andrei Nicusan]

The value and displayed fields are the defaults, namely 'text' for both of them. That's why I try to set a 'text' field in the model (I didn't mention that the 'fields' config I previously listed is from the model attached to my store).

This is exactly my problem: the rec has no fields defined, as I expect it to be a simple string instance. That's why I initially believed that passing the rec object to the text field would work.

Regarding the JSON format to load into the store, I can't control it. I get my data from a JSON reader that reads a JSON-encoded response from the server, where I use Jackson as a Java library for encoding. And that's how Jackson encodes that list of strings. Take a look at how I set the arrayStore var; this is the format I get from the server side.

Nevertheless, I don't use an ArrayStore, I use a common Store instead.