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

Question

我希望实现一个树形面板，该面板从服务器（以Json格式）动态加载内容，并使用自定义数据模型。但我不知道如何为该树定义模型和数据存储。你能提供一些示例吗？如果可能的话，我想遵循Sencha MVC建议（将模型和数据存储定义为单独的类）。 我知道如何在extjs 3中实现它，但在版本4中我迷失了方向。

最好的问候， RG

- nightwatch

---

这是一个很好的教程，适合初学者尝试在ExtJS中创建树形结构。http://atechiediary.blogspot.in/2013/06/extjs-how-to-create-static-and-dynamic.html - DarkKnightFan

Answer 1

最近我尝试了一种新的MVC方法，并成功地将其与tree panel结合使用。实际上没有什么特别之处：

视图:

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 }
    ]
});

控制器：

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.

希望这能有所帮助。

- Andrey Selitsky

---

请注意，我正在尝试在Extjs 4.1中实现相同的操作，但是模型未被找到，请问您有什么建议吗？ - Javier Gutierrez

Answer 2

我为了让这个工作起来而苦苦挣扎。如果你需要，我想和你分享。

这是我的视图：

Ext.define("GiipIq.view.Problem", {
    extend: "Ext.window.Window",
    alias: "widget.problemwindow",
    titleAlign: "center",
    closable: false,
    layout: "border",
    autoShow: true,
    maximizable: true,
    draggable: false,
    resizable: false,
    x: 0,
    y: 0,
    width: Ext.getBody().getViewSize().width/2,
    height: Ext.getBody().getViewSize().height/2,
    id: "problem-window",

    getEastPanel: function() {
        return {
            region: "west",
            xtype: "treepanel",
            title: "Problems",
            width: 200,
            split: true,
            collapsible: false,
            floatable: false,
            rootVisible: false,
            useArrows: true,
            store: Ext.create("GiipIq.store.Problems"),
            id: "problems",
            dockedItems: [{
                xtype: "toolbar",
                dock: "bottom",
                layout: "fit",
                items: [{ 
                    xtype: "button",
                    text: 'Click to Run Selected Problems',
                    id: "run-problems-button" 
                }]
            }],
            listeners: {
                checkchange: function(node, checkedStatus, options) {
                    console.log("vp");
                }
            }
        };
    },

    getCentralPanel: function() {
        return {
            xtype: "tabpanel",
            width: (Ext.getBody().getViewSize()/2) - 200,
            bodyBorder: false,

            items: [{
                title: "Problem Description",
                id: "problem-description-tab"
            },{
                xtype: "panel",
                title: "Source Code",
            },{ 
                xtype: "panel",
                title: "Big O Analysis",
            }]
        };
    },

    initComponent: function () {
        this.items = [
            this.getEastPanel(),
            this.getCentralPanel()
        ];
        this.callParent(arguments);
    }
});

这是我的商店：

Ext.define("GiipIq.store.Problems", {
    extend: "Ext.data.TreeStore",
    storeId:"problems-store",
    model: "GiipIq.model.Problem",
});

这是我的模型：

Ext.define("GiipIq.model.Problem", {
    extend: "Ext.data.Model",
    fields: [
        { name: "text", type: "string" },
        { name: "leaf", type: "bool" },
        { name: "expanded", type: "bool" },
        { name: "checked", type: "bool" }
    ],
    proxy: {
        type: "ajax",
        actionMethods: { read: "GET" },
        api: { read: "app/problems.json", },
        reader: {
            type: "json",
            root: "children"
        },
        listeners: {
            exception: function(proxy, response, operation, opts) {
                if(typeof(operation.error) == "string") {
                    Ext.Msg.alert("Error", "Connection to server interrupted" + operation.error);
                }
            }
        }
    }
});

这是我的JSON数据：

{
    success: true,
    children: [{ 
        text: "algorithms", expanded: true, leaf: false, checked: false, children: [
            { text: "bit manipulation", leaf: true, checked: true },
            { text: "brain teaser", leaf: true, checked: true }
        ]
    },{ 
        text: "data structures", expanded: true, checked: false, leaf: false, children: [
            { text: "array and strings", leaf: true, checked: true },
            { text: "linked lists", leaf: true, checked: false}
        ] 
    },{ 
        text: "knowledge based", expanded: true, leaf: false, checked: false, children: [
            { text: "C and C++", leaf: true, checked: false},
            { text: "Java", leaf: true, checked: false}
        ]
    }]
}

- user982513

---

我注意到你没有ID字段。这不会给你带来任何显示问题吗？ - Lawrence