PDA

View Full Version : How can I get an item from a string array loaded in a store?



Andrei Nicusan
21 Nov 2011, 12:17 AM
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
21 Nov 2011, 1:13 AM
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
21 Nov 2011, 1:15 AM
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
21 Nov 2011, 4:40 AM
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
21 Nov 2011, 5:03 AM
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
21 Nov 2011, 6:25 AM
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.