tree panel

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {
    Ext.Loader.setConfig({
        disableCaching: false,
        enabled: true,
        paths: {
            'Ext.ux': 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux'
        }
    });

    Ext.define('Ceres.model.Folder', {
        extend: 'Ext.data.Model',

        statics: {
            TYPES: {
                FOLDER: 'FOLDER',
                SMARTLIST: 'SMARTLIST',
                STATICLIST: 'STATICLIST'
            }
        },

        fields: [{
            name: 'id'
        }, {
            name: 'text',
            mapping: 'name'
        }, {
            name: 'type'
        }, {
            name: 'expandable',
            convert: function () {
                return true;
            } //todo: REMOVE ITS A BACKEND TASK
        }, {
            name: 'leaf',
            convert: function (v, rec) {
                return rec.get('type') !== Ceres.model.Folder.TYPES.FOLDER;
            }
        }]
    });
    Ext.define('Ceres.store.PlantMaterialList', {
        extend: 'Ext.data.TreeStore',
        requires: ['Ceres.model.Folder'],

        constructor: function (cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.merge({
                model: 'Ceres.model.Folder',
                defaultRootId: '',
                folderSort: true,
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    api: {
                        read: "http://localhost/mockdata.php"
                    },
                    reader: {
                        type: 'json',
                        root: 'data',
                        messageProperty: 'message'
                    }
                }
            },
            cfg)]);
        }
    });

    Ext.define('Ceres.view.inventoryquest.LoadPlantMaterialList', {
        extend: 'Ext.window.Window',
        alias: 'widget.loadplantmatlist',

        requires: ['Ceres.store.PlantMaterialList'],

 ...