Extjs树存储基于children属性设置叶子属性值答案

【问题标题】：Extjs tree store set leaf property value based on children propertyExtjs树存储基于children属性设置叶子属性值
【发布时间】：2016-06-06 21:35:58
【问题描述】：

我正在使用 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" }] } ] }] }

如果类别属性为空，我想要将叶子属性设置为真或假。我的模型看起来像这样：

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

});

我们的想法是为此使用叶子字段的计算配置，但如果我尝试使用 data.get('categories') 我会得到 字段叶子取决于未定义的字段获取，如果我尝试在我的模型中定义字段 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)]);
}

});

谢谢！

【问题讨论】：

标签： extjs sencha-architect extjs5

【解决方案1】：

使用以下 init 方法创建模型：

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

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

【讨论】：

谢谢吉尔赫姆！有效。你知道为什么它不能使用“计算”或“转换”配置吗？你能给我一个this.data与'object'不同的例子吗？再次感谢:)。
如果您在 if 语句之前添加 console.log(this.data);，您会看到有时 this.data 以字符串形式返回，我想丢弃这些值。抱歉，但我没有看到计算或转换为Ext.data.Model 类的有效配置。如果可以的话，提供一个你想要做的事情的小提琴。谢谢
计算和转换配置对'Ext.data.field.FieldView'有效。本周我将尝试在小提琴上添加一个示例。再次感谢。
嗨，我刚刚更新了模型以使用你问的转换方法。
嗨，我刚刚更新了我的实现，它似乎工作。谢谢！仅此一点：JSON 字符串中的 null 值通常不带逗号，因此您应该返回 record.get('categories') === null :)。

【解决方案2】：

我使用了calculate 而不是convert。

来自doc

使用计算是定义计算字段的最简单和最安全的方法。

所以代码变成了

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

【讨论】：