how to show nested json data/ extjs4?

i have a function that return 7 values, i used a tuple to return them since they dont have the same type then i serelizes it so i can read my resulted json in my js script , and i can access it via ItemN

take a look at the code:

 public JArray getJsonData( )
    {             

        //my queries here//  

        var vl = new List<Tuple<string, string,  string, int, int, double, string >>();

        vl.Add(new Tuple<string, string,  string,int, int, double, string>
             (item.Date , item.Adress,  name, item.login, pwd, role, id));                
        }

        JArray o = JArray.FromObject(vl);

        return o;          
    }

my extjs4 store:

var myStore2 = new Ext.data.JsonStore({

fields: ['Item1', 'Item2', 'Item3', 'Ite开发者_开发技巧m4', 'Item5', 'Item6', 'Item7'] ,

data: []
});

the problem is that now i need to return another element which make them 8 elements in my tuple so i get this funny error

the eight element of an eight tuple must be a tuple

so i add my eight element as a tuple as requested.

the problem is that now i get this json format: (notice 'Rest' at the end)

{Item1:"27-09-2011",Item2:"LA",Item3:"armance",Item4:"astrocybernaute",Item5:"P@ssw0rd",Item6:"Admin",Item7,Rest : {Item1 : 26 }}

the problem is that i dont know how to access it in my extjs4 store. Item8 of course doesnt work,Rest doesnt work,item1 doesnt either!!

any idea plz?

thank you for ur time

EDIT this is my new store after Matt Greer suggestion

Ext.define('MyModel', {
extends: 'Ext.data.Model',
fields: [
        { name: 'Item1' },
        { name: 'Item2' },
        { name: 'Item3' },
        { name: 'Item4' },
        { name: 'Item5' },
        { name: 'Item6' },
        { name: 'Item7' },
        { name: 'Item8', mapping: 'Rest.Item1' }
]
 });

 var myStore2 = new Ext.data.JsonStore({
 model: 'MyModel',
 proxy: {
     type: 'ajax',
     url: '',
     autoLoad :true,
     reader: {
         type: 'json'
             } 
        }
 });

but it still not working

SOLUTION I want to point out that Store.loadData does not respect the field mapping

The issue is that the sencha team changed loadData's behavior, AND it's not something that's documented in a way that is clear.

Add the following to your code base (above your app code, but below ext-all.js):

Ext.override(Ext.data.Store, {
loadDataViaReader : function(data, append) {
    var me      = this,
        result  = me.proxy.reader.read(data),
        records = result.records;

    me.loadRecords(records, { addRecords: append });
    me.fireEvent('load', me, result.records, true);
}            
});

then use:

mystore2.loadDataViaReader(data)

I'm not sure where that Tuple error is coming from. octuples are supported by .NET as shown here

Give this a try

var myTuple = Tuple.Create(3,4,5,8,12,4,12,99);

myTuple should be a octuple of 8 ints.

But, if you still get that error and you must work around it in Ext, you can use mappings. You need to define a Model, and in the Model's fields use a mapping to grab that last value:

Ext.define('MyModel', {
    extends: 'Ext.data.Model',
    fields: [
            { name: 'field1' },
            // fields 2 through 7
            { name: 'field8', mapping: 'Rest.Item1' }
    ]
 });

 var myStore = new Ext.data.JsonStore({
    model: 'MyModel',
    // ...
  });

I've never actually tried defining fields right on the store, I assume Ext is creating a Model automatically for you. So you could probably do the mapping right in the store as well.

Your solution run when we used the loadData method, and when the proxy used is a Memory proxy.

In fact, It seems that EXTJS can not map datas when its a memory proxy. but when its a Ajaxs proxy it can map the datas and fields.

Exemples with memory proxy

var fields = [
            {name: 'id', mapping: 'id'},
            {name: 'code', mapping: 'code'},
            {name: 'code', mapping: 'exercice'},
            {name: 'code', mapping: 'code'},
            {name: 'typeDocument', mapping: 'typeDocument'},
            {name: 'utilisateur', mapping: 'editionJobs[0].utilisateur'},
            {name: 'dateCreation', mapping: 'editionJobs[0].dateCreation'},
            {name: 'jobId', mapping: 'editionJobs[0].id'},
            {name: 'avenant', mapping: 'editionJobs[0].avenant'},
            {name: 'etat', mapping: 'editionJobs[0].etat'}
        ];

        var data = [];


        store = new Ext.data.Store({
            fields: fields,
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'listDossier'
                }
            },
            listeners: {
                load: function(store, records, options) {
                    store.fireEvent('datachanged', store);
                }
            }
        });

Ext.getCmp('listeEditionDossierGridPanel').getStore().loadDataViaReader(listDossier); // OK, thx for the method ;)
    Ext.getCmp('listeEditionDossierGridPanel').getStore().loadData(listDossier); // Not ok

Other exemple with Ajax Proxy :

var fields = [
                {name: 'code', mapping : 'code'},
                {name: 'avis', mapping : 'demande.avis'},
                {name: 'commentaire', mapping : 'demande.commentaire'},
                {name: 'id', mapping: 'demande.id'}
            ];

store = new Ext.data.Store({
                    fields: fields,
                    autoLoad: true,
                    proxy: {
                        type: 'ajax',
                        extraParams: {jsonRequest:JSON.stringify(valeurs)},
                        url : 'chargerDossiersEligibles.do',
                        reader: {
                            type: 'json',
                            root: 'dossiersEligibles'
                        }
                    }
                }); 

In this case all is fine and the datas can map.

Cheers

Benoit