Question

I was creating Tree Panel similar to TreeGrid example with drag’n’drop. The only problem is that items are correctly shown in tree panel in Firefox browser whereas in Chromium tree grid is empty. How’s that possible?

JSON data sent to server:

{"text":".","children": [
        {
                "id":null,
                "name":"en",
                "visible":false,
                "expanded":true,
                "leaf":false,
                "children":{
                        "id":5,
                        "name":"/",
                        "visible":false,                        
                        "expanded":true,
                        "leaf":true,
                        "children":[]                        
                }
        }]
}

Model

Ext.define('Example.model.WebTreeItem', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
        {name: 'id',        type: 'int',    defaultValue: 0},
        {name: 'visible',   type: 'boolean' },
        {name: 'name',      type: 'string'  }
    ]
});

Store

Ext.define('Example.store.WebTreeItems', {
    extend: 'Ext.data.TreeStore',
    model: 'Example.model.WebTreeItem',    
    autoLoad: true,
    proxy: {
        type: 'ajax',
        api: {
            read : 'getlist.json'
        },
        reader: {
            type: 'json'
        }
    }
});

View

Ext.define('Example.view.webitem.Tree', {
    extend: 'Ext.tree.Panel',
    alias : 'widget.webtreeitem',

    title : 'Web items',
    store: 'WebTreeItems',
    rootVisible: false,
    multiSelect: true,
    singleExpand: false,
    collapsible: true,
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    height: 800,
    renderTo: 'webstructure-tree',
    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        flex: 2,
        sortable: true,
        dataIndex: 'name'
    },{
        xtype: 'booleancolumn',
        text: 'Visible',
        flex: 1,
        dataIndex: 'visible',
        sortable: false
    }],
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    }]
});

Dependencies are loaded automatically using

Ext.Loader.setConfig({enabled:true});

Ext.application({
 ...
});

Any suggestion will be highly appreciated.

Answer 1

Well I thought that I was sending aforementioned JSON, but in fact I was sending something like this (quoted response with escaped quotes) and Chromium couldn’t read it correctly

"{\"text\":\".\",\"children\": [
        {
                \"id\":null,
                \"name\":\"en\",
                \"visible\":false,
                \"expanded\":true,
                \"leaf\":false,
                \"children\":{
                        \"id\":5,
                        \"name\":\"/\",
                        \"visible\":false,                        
                        \"expanded\":true,
                        \"leaf\":true,
                        \"children\":[]                        
                }
        }]
}"