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" }] } ] }] }

如果categories属性为null，我想要将leaf属性设置为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'）我得到 Field leaf依赖于undefined field 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

使用以下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

Answer 2

我使用calculate代替convert。

来自doc

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

所以代码变成了

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

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

2 个答案: