Extjs tree store set leaf 属性 value based on children 属性 值

Question

我正在使用 TreeStore 加载如下所示的数据：

{ "categories": [{ "text": "Ext JS", "expanded": "true", "categories": [{ "text": "app", "categories": [{ "text": "Application.js", "categories": "null" }] }, { "text": "button", "expanded": "true", "categories": [{ "text": "Button.js", "categories": "null" }, { "text": "Cycle.js", "categories": "null" }, { "text": "Split.js", "categories": "null" }] } ] }] }

我想要的是在类别 属性 是否为 null 时将叶子 属性 设置为 true 或 false。 我的模型看起来像这样：

Ext.define('TestTree.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
    'Ext.data.field.Boolean'
],
fields: [
    {
        name: 'text'
    },
    {
        type: 'boolean',
        name: 'leaf'
    }
]

});

我的想法是为此使用叶字段的计算配置，但如果我尝试使用 data.get('categories') 我得到 字段叶取决于未定义的字段get 并且如果我尝试在我的模型中定义字段 categories 并使用 data.categories，什么也不会发生。 我不知道我错过了什么！ 我的商店是这样的：

Ext.define('TestTree.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
    'TestTree.model.MyModel',
    'Ext.data.proxy.Ajax',
    'Ext.data.reader.Json'
],
constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        storeId: 'MyTreeStore',
        autoLoad: true,
        model: 'TestTree.model.MyModel',
        proxy: {
            type: 'ajax',
            url: 'resources/data/treeData.json',
            reader: {
                type: 'json',
                rootProperty: 'categories'
            }
        }
    }, cfg)]);
}

});

谢谢！

Answer 1

使用以下初始化方法创建模型：

Ext.define("Files", {
    extend : "Ext.data.Model",
    fields : [{
         name: 'categories'
    },{
        name: 'leaf',
        convert : function(value, record) {
            return record.get('categories') == 'null';
        }
    }]
});

这应该可以解决您的问题，这里是 fiddle，您可以看一看：https://fiddle.sencha.com/#fiddle/gq8

Answer 2

我用 calculate 而不是 convert。

来自doc

Using calculate is the simplest and safest way to define a calculated field.

所以代码变成了

Ext.define("Files", {
    extend : "Ext.data.Model",
    fields : [{
         name: 'categories'
    },{
        name: 'leaf',
        calculate : function(data) {
            return data.categories === null;
        },
        depends: ['categories']
    }]
});