Question

我需要Extjs Tree面板，其中包含用于文件列表的动态远程数据（JSON）。

并且日期字段名称不适合Extjs树存储字段。所以我需要重新映射才能合适，比如添加叶子字段和文本字段。

返回JSON数据是这样的：

[{
   "id":1,
   "yourRefNo":"A91273",
   "documentName":"Test Document",
   "documentFileName":"login_to_your_account-BLUE.jpg",
   "updatedBy":"root root",
   "updatedAt":"\/Date(1343012244000)\/"
}]

这是树面板：

Ext.define('App.view.Document.DocumentList', {
    extend :'Ext.tree.Panel',
    rootVisible : false,
    alias: 'widget.Document_list',
    store: 'DocumentList_store'

});

这是商店：

Ext.define('App.store.DocumentList_store', {
    extend: "Ext.data.TreeStore",
    model: 'App.model.DocumentList_model',
    proxy: {
        type: 'ajax',
        url: '/Document/GetDocumentList/',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: '' // there is no root
        },
        pageParam: undefined,
        startParam: undefined,
        pageParam: undefined
    },
    root: {
        children: []
    },
    autoLoad: false,
    listeners: {
        append: function (thisNode, newChildNode, index, eOpts) {
            console.log(newChildNode.get('documentName')); // 'Test Document'
            newChildNode.set('leaf', true);
            newChildNode.set('text', newChildNode.get('documentName'));
            // it does not add to tree panel. 

        }
    }
});

从服务器加载数据后，它会很好地调用append函数。但在那之后，树形图中没有任何内容。

我做错了什么？请告诉我。

由于

[编辑]

这是模型，

Ext.define("App.model.DocumentList_model", {
    extend: "Ext.data.Model",
    fields: [
        'id','yourRefNo','documentName','documentFileName','updatedBy','updatedAt'
    ]
});

Answer 1

我正在使用我的一段工作代码融合您的代码。试试看是否有效：

型号：

Ext.define("App.model.DocumentList_model", {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'yourRefNo'},
        {name: 'documentName' }, 

        {name: 'documentFileName'},
        {name: 'updatedBy'},
        {name: 'updatedAt', convert: function(v) { return v;} }, // Notice you can do field conversion here

        {name: 'leaf', type: 'boolean', defaultValue: false, persist: false},
    ],

    proxy: {
        type: 'ajax',
        url: '/Document/GetDocumentList/',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: 'children' 
        },
    },    
});

商店：

Ext.define('App.store.DocumentList_store', {
    extend: "Ext.data.TreeStore",
    model: 'App.model.DocumentList_model',

    root: {
        text: 'Root',
        id: null,
        expanded: true
    },

    autoLoad: false,
});

JSON响应：

{
    "success":true,
    "children":[{
        "id":1,
        "yourRefNo":"A91273",
        "documentName":"Test Document",
        "documentFileName":"login_to_your_account-BLUE.jpg",
        "updatedBy":"root root",
        "updatedAt":"\/Date(1343012244000)\/",
        "leaf":false
     }]
}

Extjs 4，Dynamic Tree和store re-mapping

1 个答案: