Bug? JsonStore - panelgrid field mappings working in browser not in air?

[SlashEMc2k]

var mydata = '{"items":[{"name":{"givenName":"John","formatted":"John Sim","familyName":"Sim"},"id":"simj01","displayName":"John Sim","guid":"01CD2D900FE711DFBFAFED8A0AD5D910","addresses":[],"connected":"true","organizations":{"empty":false},"emails":{"value":"me@me.co.uk","empty":false,"type":"WORK","primary":"true"}]}';

		//create a datamodel to display the JSON
		var store = new Ext.data.JsonStore({
			// store configs
			autoDestroy: true,
			storeId: 'forumStore',
			//data:Ext.encode(mydata),
			data:Ext.decode(mydata),
			// reader configs
			root: 'items',
			idProperty: 'id',
			fields: [{name:'UID', mapping:'id'}, {name:'displayName', mapping:'displayName'}, {name:'email', mapping:'emails.value'}]
		});

The mapping of "emails.value" appears to work fine in firefox but not in air?
UID and displayName appear within the grid in AIR.

//create the Grid
		var grid = new Ext.grid.GridPanel({
			store: store,
			columns: [
				{id: 'uid', header: 'UID', width: 80, sortable: true, dataIndex: 'UID'},
				{id: 'conn', header: 'Connection', width: 80, sortable: true, dataIndex: 'displayName'},
				{id: 'email', header: 'email', width: 80, sortable: true, dataIndex: 'email'}
			],
			stripeRows: true,
			autoExpandColumn: 'conn',
			height: 200,
			width: 400,
			title: 'My Connections',
			viewConfig: {scrollOffset: 2}
		});
		
		
		grid.render('connections');

can anyone see what stupid mistake I've made?

Thanks

[Condor]

It should work if you create your store directly, before Ext.onReady.

(JsonReader.createAccessor uses new Function() which is only allowed in Air at startup)

[SlashEMc2k]

It should work if you create your store directly, before Ext.onReady.

(JsonReader.createAccessor uses new Function() which is only allowed in Air at startup)

Thanks Condor:: I took out the Ext.onReady. The code is held within the html head but still only UID and display name are showing, email field is blank?

If I run the page in a browser with Ext.onReady in place the values are displayed?

[Condor]

Don't you get an error in Air when you put your store inside Ext.onReady?

ps. You do need to put "grid.render('connections')" inside Ext.onReady.

[SlashEMc2k]

I have completely removed Ext.onReady now; the grid display still works and shows UID and displayName but still not the email.value -- "me@me.co.uk".

In Aptana 2.0.4 I select debug to run and start the air application but I get no errors?

I still don`t understand why the store has to load outside of Ext.onReady?
How would Ext.Ajax.request work to put data into the store for a generated grid if it was event driven by an on click event?


These are the scripts I call within the head

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="extjs/air/css/ext-air.css" />    
    <script type="text/javascript" src="air/AIRAliases.js"></script>
    <script type="text/javascript" src="air/AIRIntrospector.js"></script>
    
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="extjs/ext-air.js"></script>

I noticed there was a bug jsonReader bug in 3.2.1 that affects Ext.data.ArrayStore
Could this be a similar issue?

//data
{"items":[{"
   name":{
      "givenName":"John",
      "formatted":"John Sim",
      "familyName":"Sim"},
   "id":"simj01",
   "displayName":"John Sim",
   "guid":"01CD2D900FE711DFBFAFED8A0AD5D910",
   "addresses":[],
   "connected":"true",
   "organizations":{
      "empty":false},
   "emails":{
      "value":"me@me.co.uk",
      "empty":false,
      "type":"WORK",
      "primary":"true"}
   ]}
}

//fields
fields: [{
    name:'email',
    mapping:'emails.value'
}]


//grid mapping
{
    id: 'email', 
    header: 'email', 
    width: 80, 
    sortable: true,
    dataIndex: 'email'
}

I have also tried to retrieve name.givenName but it does not return the value?
only the root values seem to be returned ie id, displayName, guid etc..

[Condor]

No, loading the store can happen anywhere. It's the call to JsonReader.buildExtractors (which calls Json.createAccessor) that needs to be outside Ext.onReady.

For security reasons, Air has very strict rules on when eval() and new Function() are allowed (only when the script is loading - not in event handlers).

ps. You'll run into the same problem when you start using DateFields (all possible dateFormats will have to be precompiled at startup).

[SlashEMc2k]

Thanks Condor; that makes sense
So if my understanding is right this should work -

var storeSetup = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    storeId: 'forumStore',
    // reader configs
    root: 'items',
    idProperty: 'id',
    fields: [{
        name: 'UID',
        mapping: 'id'
    }, {
        name: 'displayName',
        mapping: 'displayName'
    }, {
        name: 'email',
        mapping: 'emails.value'
    }]
});

Ext.onReady(function(){

    var mydata = '{"items":[{"name":{"givenName":"John","formatted":"John Sim","familyName":"Sim"},"id":"simj01","displayName":"John Sim","guid":"01CD2D900FE711DFBFAFED8A0AD5D910","addresses":[],"connected":"true","organizations":{"empty":false},"emails":{"value":"me@me.co.uk","empty":false,"type":"WORK","primary":"true"}]}';
    
    
    var dataStore = new Ext.data.Store({
        autoLoad: true,
        data: Ext.decode(mydata),
        reader: storeSetup
    });
    
    var grid = new Ext.grid.GridPanel({
        store: dataStore,
        columns: [{
            id: 'uid',
            header: 'UID',
            width: 80,
            sortable: true,
            dataIndex: 'UID'
        }, {
            id: 'conn',
            header: 'Connection',
            width: 80,
            sortable: true,
            dataIndex: 'displayName'
        }, {
            id: 'email',
            header: 'email',
            width: 80,
            sortable: true,
            dataIndex: 'email'
        }],
        stripeRows: true,
        autoExpandColumn: 'conn',
        height: 200,
        width: 400,
        title: 'My Connections',
        viewConfig: {
            scrollOffset: 2
        }
    });
});

[Condor]

The same rules apply to Ext.decode!

(unless you set Ext.USE_NATIVE_JSON = true)

[SlashEMc2k]

Thanks for the update. Just reviewing some bugs I put in.. mybad..
That did the trick!!! Thanks so much for the help