Extjs 4 - creating a model for a tree panel

Question

I would like to implement a tree panel with content loaded dynamically from the server (as Json) and with a custom data model. But I dont know how to define a model and a data store for that tree. Can you provide some examples? If possible, I'd like to conform to the sencha mvc recommendations (the model and the data store defined as separate classes). I knew how to do it in extjs 3 but i'm lost in version 4.

Best regards RG

Answer 1

I experimented with a new MVC approach recently, and I managed to get it work with the treepanel. Nothing special actually:

View:

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

Store:

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

Model:

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.

Hope it will help.

Answer 2

I struggle so much to get this working. I want to share with you in case you need it.

Here is my view:

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

Here is my store:

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

Here is my model:

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

Here is my 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}
        ]
    }]
}