Question

Am trying to have a tree when a button is clicked. Basically this view has a toolbar in the top, and i want the tree to be displayed below the toolbar. Firstly, am confused what xtype should i use, whether its

xtype : 'treepanel'

or its

xtype : 'treeview'.

Here is the code for my tree

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

    initComponent: function () {
        var config = {
            xtype: 'panel',
            border: false,
            autoScroll: true,
            baseCls: 'topMenu',

            dockedItems: [{
                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'
                }],
                items: [{
                    xtype: 'treepanel',
                    title: '',
                    border: false,
                    enableDD: true,
                    viewConfig: {
                        enableDD: true,
                        plugins: {
                            ptype: 'treeviewdragdrop'
                        }
                    },
                    collapsible: false,
                    useArrows: true,
                    rootVisible: false,
                    store: 'HierarchyTree',



                    multiSelect: false,
                    singleExpand: false,
                    id: 'TREE'

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

Am defining the store inside the tree because,defining the tree store in the app/store folder, shows error as follows:

me.store.getRootNode is not a function
node: me.store.getRootNode()

/Model

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

/Store

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

proxy : {
    type : 'ajax',
    url : 'data/Locations.aspx',
    reader : {
        type : 'json',
        root : 'Rows'
    },
    actionMethods : {
        create : 'POST',
        read : 'POST'
    },
    extraParams : {
        mode : 'HIERARCHYFULLLIST'

    }
},
autoLoad : true

});

Also, when i use xtype :'treepanel', its just showing a horizontal scrollbar, and nothing else.
And when i use xtype: 'treeview', its showing

me.panel is undefined
treeStore = me.panel.getStore();

Could anyone please tell me what mistake am i doing

EDIT

The config is applied to Ext.getCmp(‘center’) because the application is divided into three sections, and so whenever we display a view, we get hold of the center region of the application, and then display it

Answer 1

Your code has some errors. you have two ‘items’ in the panel config, the first one should be ‘tbar’.

Another error is how you add the store, you should just add the class store : 'HierarchyTree' or to create the store store: Ext.create('App.store.HierarchyTree',{}).

And you should use treepanel since treeview is just the view used by the treepanel.
Add this fixes and see if it will work or if not post the new issues. Hope it helps.

EDIT

Ok so another thing, initComponent function must contain the call to the parent function.

this.callParent(); // at the end of the initComponent function.

And I still have some questions why do you apply the config to an item you get with ext.getCmp, isn’t the config for the ‘Campus.view.Hierarchy’ object ?
If so you should apply directly to ‘this’ object.

Ext.apply(this,config);
this.callParent(); 

As it is now, it is not applying the config since apply takes two arguments the destination object and the config object.

EDIT
On the issue with the config, you cannot apply the config to the center panel like that, because it’s not rendered.
So rather than doing that you should add the config to the current panel, and add the curent panel to the viewport, which i guess it has layout border.
This shoud be the init component function:

config = {
...}
Ext.apply(this,config);
this.callParent(); 

And the panel which contains the center region should have the panel as an item.

 ...some viewport...
   layout:'border',
   items: [
        { 
           xtype:'hierarchy',
           region: 'center'
        }
   ]