how to add treePanel to a viewport

[sunrong]

Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0'
        }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150,
        items: tree
        },......

var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
            }
        },
        region:'west',
       contentEl:'west',
      id:'west-panel',
        layout:'accordion',
        height: 300,
        width: 250,
        title: 'function',
        useArrows: true,
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Expand All',
                handler: function(){
                    tree.expandAll();
                }
            }, {
                text: 'Collapse All',
                handler: function(){
                    tree.collapseAll();
                }
            }]
        }]
    });

the code does not work?how to fix it? Thanks!

[vietits]

Try to fix your code as below:

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    },
//  region:'west',
//  contentEl:'west',
    id:'west-panel',
//  layout:'accordion',
    height: 300,
    width: 250,
    title: 'function',
    useArrows: true,
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Expand All',
            handler: function(){
                tree.expandAll();
            }
        }, {
            text: 'Collapse All',
            handler: function(){
                tree.collapseAll();
            }
        }]
    }]
});