Databases
StackOverflow2013
Postsdbo
POHow to specify rootProperty for nested data if it is one level below?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to specify rootProperty for nested data if it is one level below?
    text
    copied!<p>I am fetching nested data to be shown as nested list but whenever I tap on top level item, it again shows same top level list instead of showing children list and a ajax request is fired to fetch json data again. Here is the store:</p> <pre><code>Ext.define('MyTabApp.store.CategoriesStore',{ extend:'Ext.data.TreeStore', config:{ model : 'MyTabApp.model.Category', autoLoad: false, storeId : 'categoriesStore', proxy: { type: 'ajax', url: 'resources/data/catTree.json', reader: { type: 'json', rootProperty: 'data.categories' } }, listeners:{ load: function( me, records, successful, operation, eOpts ){ console.log("categories tree loaded"); console.log(records); } } } }); </code></pre> <p>and here is the data in that file which I am using to mock service:</p> <pre><code>{ "data":{ "categories": [ { "name": "Men", "categories": [ { "name": "Footwear", "categories": [ { "name": "Casual Shoes", "leaf": true }, { "name": "Sports Shoes", "leaf": true } ] }, { "name": "Clothing", "categories": [ { "name": "Casual Shirts", "leaf": true }, { "name": "Ethnic", "leaf": true } ] }, { "name": "Accessories", "leaf": true } ] }, { "name": "Women", "categories": [ { "name": "Footwear", "leaf": true }, { "name": "Clothing", "leaf": true }, { "name": "Accessories", "leaf": true } ] }, { "name": "Kids", "categories": [ { "name": "Footwear", "categories": [ { "name": "Casual Shoes", "leaf": true }, { "name": "Sports Shoes", "leaf": true } ] }, { "name": "Clothing", "leaf": true } ] } ] } } </code></pre> <p>This is the list:</p> <pre><code>Ext.define('MyTabApp.view.CategoriesList', { extend: 'Ext.dataview.NestedList', alias : 'widget.categorieslist', config: { height : '100%', title : 'Categories', displayField : 'name', useTitleAsBackText : true, style : 'background-color:#999 !important; font-size:75%', styleHtmlContent : true, listConfig: { itemHeight: 47, itemTpl : '&lt;div class="nestedlist-item"&gt;&lt;div&gt;{name}&lt;/div&gt;&lt;/div&gt;', height : "100%" } }, initialize : function() { this.callParent(); var me = this; var catStore = Ext.create('MyTabApp.store.CategoriesStore'); catStore.load(); me.setStore(catStore); } }); </code></pre> <p>The list starts working properly without any ajax request on each tap if I remove <code>data</code> wrapper over top <code>categories</code> array and change <code>rootProperty</code> to <code>categories</code> instead of <code>data.categories</code>. Since server is actually returning <code>categories</code> in <code>data</code> object I cannot remove it so how do I fix the store in that case? Also why is that additional ajax request to fetch the file?</p> <p>[EDIT] Tried to create a fiddle <a href="http://www.senchafiddle.com/#d16kl" rel="nofollow">http://www.senchafiddle.com/#d16kl</a> which is similar but not same because it is using 2.0.1 and data is not loaded from external file or server.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload