简体   繁体   中英

ExtJS 4 tree panel items visible in Firefox but not in Chromium

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.

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\":[]                        
                }
        }]
}"

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM