javascript - Extjs 4 - 为树面板创建模型

Question

我想实现一个树形面板，其中包含从服务器动态加载的内容(作为 Json)和自定义数据模型。但我不知道如何为该树定义模型和数据存储。你能提供一些例子吗？如果可能的话，我想遵守 sencha mvc 的建议(模型和数据存储定义为单独的类)。我知道如何在 extjs 3 中执行此操作，但我在版本 4 中迷路了。

最好的问候RG

Answer 1

我最近尝试了一种新的 MVC 方法，并设法让它与树面板一起工作。实际上没什么特别的:

查看:

Ext.define('RoleBuilder.view.RoleList', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.roles',
    title: 'Roles',
    store: 'Roles'    
});

商店:

Ext.define('RoleBuilder.store.Roles', {
    extend: 'Ext.data.TreeStore',
    model: 'RoleBuilder.model.Role',
    requires: 'RoleBuilder.model.Role',
    root: {
        text: 'Roles',
        expanded: true        
    },
    proxy: {
        type: 'ajax',
        url: loadRolesUrl,
        actionMethods: 'POST',
        reader: {
            type: 'json'
        }
    }
});

型号:

Ext.define('RoleBuilder.model.Role', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int', mapping: 'Id' },
        { name: 'text', type: 'string', mapping: 'Text' },
        { name: 'leaf', type: 'boolean', mapping: 'Leaf' },
        { name: 'loaded', type: 'boolean', mapping: 'Loaded', defaultValue: false },
        { name: 'Properties'},
        { name: 'expanded', defaultValue: true }
    ]
});

Controller :

Ext.define('RoleBuilder.controller.RoleList', {
    extend: 'Ext.app.Controller',
    init: function () {
        this.control({
            'roles': {
                itemcontextmenu: this.onItemContextMenuClick,
                itemclick: this.onItemClick
            }
        });

        this.application.on({
            'role-saved': Ext.Function.bind(this.onRoleSaved, this)
        });
    },
..... too long, but you got the idea.

希望对您有所帮助。