代码之家 › 专栏 › 技术社区 › Aleksey

ExtJS Treepanel不显示子级

extjs4.2 extjs4 extjs

Aleksey · 技术社区 · 7 年前

我打电话 store.load() ,但treepanel仅显示第一级(模型ProcessVedDoc)。如果我向load方法添加回调,我会在记录中看到空的子节点。虽然数据中有子对象(但对象未映射到模型VedDoc)。可能有什么问题? screenshot from firefox dev tools

模型

Ext.define('Proj.model.ProcessVedDoc', {
extend: 'Ext.data.Model',
fields: [
    {name: "text", mapping: 'name'},
    {name: "expanded", type: "boolean", defaultValue: true},
    {name: "loaded", type: "boolean", defaultValue: true}
}],
requires : ['Proj.model.VedDoc'],
hasMany: [{
    model: 'Proj.model.VedDoc',
    associationKey : 'children',
    name: 'children'
}]});

Ext.define('Proj.model.VedDoc', {
extend: 'Ext.data.Model',
fields: ['id', 
  {name: 'text', mapping: 'name'}, 
  {name: 'leaf', type: 'boolean', defaultValue: true, persist: false}],
idProperty: 'id'});

百货商店

Ext.define('Proj.store.VedDocsTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'Proj.model.ProcessVedDoc',
autoLoad: false,
autoSync: false,
root: {
    expanded: true
},
proxy: {
    type: 'ajax',
    url: 'portfolios/veddocs',
    getParams: Ext.emptyFn,
    timeout: 300000,
    reader: {type: 'json', root: 'docs'}
}});

    {
        xtype: 'treepanel',
        title: 'Documents',
        name: 'vedDocs',
        margin: '15 0 0 0',
        width: 650,
        height: 350,
        rootVisible: false,
        store: vdocs
    }

Json

{
"docs": [{
    "name": "15a1dc1515aa151eea556",
    "children": [
        {"name": "Doc1", "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f"},
        {"name": "Doc2", "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5"},
        {"name": "Doc3, "id": "49a045cf-b5cf-4478-b886-f078e6a48753"}]
},
{
    "name": "15a1dc18515bb515aa151556",
    "children": [
        {"name": "Doc1", "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767"},
        {"name": "Doc2", "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"}]
}],
"success": true}

2 回复 | 直到 7 年前

Narendra Jadhav 7 年前

试着用那种格式回答,因为 treepanel

JSON格式

{
    "success": true,
    "children": [{
        "text": "15a1dc1515aa151eea556",
        "expanded": true,
        "children": [{
            "text": "Doc1",
            "leaf": true,
            "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f"
        }, {
            "text": "Doc2",
            "leaf": true,
            "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5"
        }, {
            "text": "Doc3",
            "leaf": true,
            "id": "49a045cf-b5cf-4478-b886-f078e6a48753"
        }]
    }, {
        "text": "15a1dc18515bb515aa151556",
        "expanded": true,
        "children": [{
            "text": "Doc1",
            "leaf": true,
            "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767"
        }, {
            "text": "Doc2",
            "leaf": true,
            "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"
        }]
    }]
}

ExtJs树面板和存储代码

Sencha Fiddle

var store = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    autoSync: false,
    root: {
        expanded: true
    },
    proxy: {
        type: 'ajax',
        url: 'veddocs.json',
        timeout: 300000,
        reader: {
            type: 'json',
            root: 'children'
        }
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

注*您可以在前端制作treedata格式,并使用 . 有关更多详细信息 Extjs Store Docs

Alexander 7 年前

您需要从 Ext.data.TreeModel