nested list with ajax and proxy

[Shaci]

Hi to all, i have a little issue with nested list and proxy.

I created simple working example of nested list.
Here is.

app.js

Ext.application({
    name: 'MyApp',
    models: ['ListItem'],
    stores: ['ListStore'],
    views: ['NestedView'],
    launch: function () {
        
        var nestedList = { xtype: 'nestedview', store: Ext.getStore("ListStore"), flex: 1 }


        Ext.Viewport.add({
            layout: 'hbox',
            items: [
            nestedList]
        });
    } // launch
}); // application()

app/view/NestedView.js

Ext.define('MyApp.view.NestedView', {
  extend: 'Ext.dataview.NestedList',
  alias: 'widget.nestedview',
  getItemTextTpl: function(recordnode) {  return '<div><strong>name: {name} balance: {balance}</strong></div>'; }
})

app/model/ListItem.js

Ext.define('MyApp.model.ListItem', {
  extend: 'Ext.data.Model',
  config: {
    fields: [{name: 'name', type: 'string'}, {name: 'balance', type: 'int'}]
  }
});

and store:

app/store/ListStore.js

Ext.define('MyApp.store.ListStore', {
    extend: "Ext.data.TreeStore",
    config: {
      model: 'MyApp.model.ListItem',
      defaultRootProperty: 'items',
      root: {
          items: [{"_id":"5072913b43749c1824000005","account_category":"cat1","balance":60000,"created_at":"2012-10-08T12:39:23+04:00","currency":"rub","name":"VISA","updated_at":"2012-10-08T13:36:35+04:00"},{"_id":"50754f9d43749c0dd8000003","account_category":"cat1","balance":60000,"created_at":"2012-10-10T14:36:13+04:00","currency":"rub","name":"VTB","updated_at":"2012-10-12T22:42:57+04:00"}]
          
      }
    //  proxy: {
    //      type: 'ajax',
    //      url : 'accounts.json',
    //      reader: { type: 'json'}
    //  }
    }
});

When i use hardcode items all ok, but when i use proxy and such ListStore.js file:

Ext.define('MyApp.store.ListStore', {
    extend: "Ext.data.TreeStore",
    config: {
      model: 'MyApp.model.ListItem',      
      proxy: {
          type: 'ajax',
          url : 'accounts.json',
          reader: { type: 'json'}
      }
    }
});

with accounts.json file:

[{"_id":"5072913b43749c1824000005","account_category":"cat1","balance":60000,"created_at":"2012-10-08T12:39:23+04:00","currency":"rub","name":"VISA","updated_at":"2012-10-08T13:36:35+04:00"},{"_id":"50754f9d43749c0dd8000003","account_category":"cat1","balance":60000,"created_at":"2012-10-10T14:36:13+04:00","currency":"rub","name":"VTB","updated_at":"2012-10-12T22:42:57+04:00"}]

I have some bugs (i can tap on each item any number of times, and i get infinite scrolling )

Does anyone has suggestions what i doing wrong?

[haduki]

because:

defaultRootProperty: 'items',

your response have to:

{    
    items:[
        {},{}
    ]
}

[Shaci]

Thanks a lot, but i dont use

defaultRootProperty: 'items'

in second variant of ListStore.js

I write another variant now:

accounts.js as you say:

{
    "items":[             {"_id":"5072913b43749c1824000005","account_category":"cat1","balance":60000,"created_at":"2012-10-08T12:39:23+04:00","currency":"rub","name":"VISA","updated_at":"2012-10-08T13:36:35+04:00"},             {"_id":"50754f9d43749c0dd8000003","account_category":"cat1","balance":60000,"created_at":"2012-10-10T14:36:13+04:00","currency":"rub","name":"VTB","updated_at":"2012-10-12T22:42:57+04:00"}
            ]
}

and ListStore.js with rootProperty

Ext.define('MyApp.store.ListStore', {
    extend: "Ext.data.TreeStore",
    
    config: {
      model: 'MyApp.model.ListItem',      
      proxy: {
          type: 'ajax',
          url : 'accounts.json',
          reader: {
            type: 'json',
            rootProperty: 'items'
        }
      }
    }
});

it works, but bugs still here

[haduki]

have you tried

Ext.define('MyApp.store.ListStore', {
    extend: "Ext.data.TreeStore",
        config: {
           model: 'MyApp.model.ListItem',      
           defaultRootProperty: 'items',
           proxy: {
             type: 'ajax',
             url : 'accounts.json',
             reader: {
               type: 'json'
             }
           }
    }
});

though you did not specify 'defaultRootProperty',it dose not mean 'defaultRootProperty' is null.

if you dislike 'defaultRootProperty',your response should be：(also don't set your reader's rootProperty config)

{    "children":[             {"_id":"5072913b43749c1824000005","account_category":"cat1","balance":60000,"created_at":"2012-10-08T12:39:23+04:00","currency":"rub","name":"VISA","updated_at":"2012-10-08T13:36:35+04:00"},             {"_id":"50754f9d43749c0dd8000003","account_category":"cat1","balance":60000,"created_at":"2012-10-10T14:36:13+04:00","currency":"rub","name":"VTB","updated_at":"2012-10-12T22:42:57+04:00"}            ]}

[Shaci]

Thank, i understand, that i have default value of defaultRootProperty = "children"

(if i understand you, i good know javascript, but i learn sencha only few days)

I have another question, what if i can't convert the respons.
How i can do this with sencha, maybe in reader?

For example, i want transform this json

 [
{ id:1, name: "John"},
{id:2, name: "Lopez"}
]

to this:

{
items: [
{ id:1, name: "John"},
{id:2, name: "Lopez"}
]
}

or, which more important, i want add my own items, country name for example
If i want, that people of Brazil are displayed under "Brazil item", and people from USA under "USA item", but i dont want do any changes on server side

For example, transform to this:

 [
{id:"country", name:"USA"},
{ id:1, name: "John"},
{id: "country", name:"Brazil"},
{id:2, name: "Lopez"}
]