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

控制器：

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.

希望它会有所帮助。

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