EXTJS MVC Tree store

Question

Am having a tree view which gets its data from the tree store. But, however, am able to see only the small folders that gets displayed as part of a tree structure. the name of the nodes is not getting displayed, and when i try to print the record, it just says that its an empty string. Here is the code:

App/View

Ext.define('App.view.Hierarchy', {
    alias: 'widget.hierarchy',
    extend: 'Ext.panel.Panel',

    initComponent: function () {

        var config = {

            xtype: 'panel',
            border: false,
            autoScroll: true,
            baseCls: 'topMenu',
            html: '<div class="PageTitle" style="width:600px;"><b>' + LANG.HIERARCHYT + '</b><br>' + LANG.HIERARCHYTxt + '<br>' + '</div>',


            items: [{
                xtype: 'toolbar',
                border: false,
                dock: 'top',
                items: [{
                    xtype: 'button',
                    text: LANG.BTADDREG,
                    iconCls: 'icon-add-tb',
                    cls: 'tip-btn',
                    iconAlign: 'right',
                    action: 'addRegion',
                    id: 'ADDREGION'
                }]

            },

            {
                xtype: 'treepanel',
                title: 'Hierarchy Tree',
                id: 'hierarchyTree',
                border: false,
                alias: 'widget.hierarchyTree',
                height: 1000,
                viewConfig: {
                    enableDD: true,
                    plugins: {
                        ptype: 'treeviewdragdrop'
                    }
                },
                collapsible: false,
                useArrows: true,
                rootVisible: false,
                store: Ext.create('Campus.store.HierarchyTree'),
                displayField: 'Title',
                multiSelect: false,
                singleExpand: false,


            }]
        }

        var holder = Ext.getCmp('center');
        holder.remove(0);
        holder.add(Ext.apply(config));
        this.callParent(arguments);
    }
});

Model

Ext.define('App.model.HierarchyTree', {
    extend : 'Ext.data.Model',
    fields : ['Title', 'ID', 'LevelID', 'ParentID'] 
});

Store

Ext.define('App.store.HierarchyTree', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.HierarchyTree',
    storeID: 'HierarchyTree',

    proxy: {
        type: 'ajax',
        url: 'data/Locations.aspx',

        reader: {

        },
        actionMethods: {
            create: 'POST',
            read: 'POST',
            update: 'POST'
        },
        extraParams: {
            mode: 'HIERARCHYFULLLIST'


        }
    },
    autoLoad: true
});

Controller

Ext.define('App.controller.Hierarchy', {
    extend: 'Ext.app.Controller',
    stores: ['Me', 'Regions', 'Areas', 'Towns', 'HierarchyTree'],
    model: ['Me', 'Teams', 'Regions', 'User', 'HierarchyTree'],
    views: ['App.view.Hierarchy', 'App.view.AddRegions'],
    refs: [{
        ref: 'myHierarchyTree',
        selector: 'hierarchyTree'
    }],

    init: function () {

        this.getHierarchyTreeStore().load();

        this.control({
            'button[action=addRegion]': {
                click: this.addRegion
            },
            '#hierarchyTree': {
                itemclick: this.itemclick

            }
        })
    },
    itemclick: function (view, record) {
        console.log(record.get('Title'))
    }
});

Also, the JSON thats being returned is:

{"text":".","children": [{"text":"Asia Pacific","id":"537","level":"1", "expanded": 
 false,"singleClickExpand":true,"children":[{"text":"Japan", "cls":"xtreenode-Level2-
Indent", "id":"538", "hl1":"537","level":"2","singleClickExpand":true, "expanded":   
false, "children":[]},

Answer 1

Treepanel's display field defaults to text, which is ok with the json being returned, but the problem is the store model, which should include as fields the text, cls ..and other attributes you have in your json. Otherwise these will not be mapped to the records and you get empty text.

Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID', 'text', 'level','cls,....]

EDIT

You have modified the displayField to be the Title, but the json doesn't contain the title attribute. You have to simple fixes, either you modify the model if the text is actually the title. You can do this by setting a mapping to the field.

  Ext.define('App.model.HierarchyTree', {
    extend : 'Ext.data.Model',
    fields : [{name:'Title',type:'string',mapping:'text'}, 'ID', 'LevelID', 'ParentID',]

This will cause the Title to be populated by the text values from the json.

Also you can remove the displayField config and then the text value will be applied, but this will still mean that the 'Title' value will be empty.

Answer 2

OK, finally got it:) Set the displayfield in the tree to 'text'

 displayfield : 'text'

And, Once again thank you nscrob

And one more question, could you please give me any guidance on how to open different views depending upon the level in the tree that is being clicked

This works.

if (record.get('level')==1) 
    {
        this.erWin = Ext.create('App.view.EditRegions');

        this.erWin.showWin();
    }
    else{
        //open another_view
    }