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

Smaltite

This is a good tutorial for beginners trying to create trees in ExtJS. atechiediary.blogspot.in/2013/06/… – Sumter

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.

Hymettus

please, I'm trying the same in Extjs 4.1, but the model isn't found, any suggest? – Tangy

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

Bough

I notice you do not have an ID field. Doesn't that give you any display problems? – Germano