Ext.tree.Panel after collapsed not expanding

Question

After creating the tree panel, I set the collapsible property to true. On the page, after clicking on that collapse icon(>>), the tree is collapsed. But when I try to expand it again after collapse, it doesn't expand. On page, the javascript error says "Function Expected". I am totally stuck and need help. Please do help me out. Here is the code which I used to create a TreePanel. After creating this tree, I add it to the viewport.

var tree1 = Ext.create('Ext.tree.Panel', {
    title : "    ",
     xtype : 'treepanel',
    store : store,
    id : 'tree1',
    region : 'west',
    height : 300,
    width : '19%',  
    useArrows : true,
    rootVisible : false,
    collapsible:true,
    expand : true,

Answer 1

create a contentplaceHolder which will be in your west region

var contentplaceHolder = Ext.create('Ext.panel.Panel', {
  height: 500,
  listeners: {
   click : {
      element : 'el',
      fn : function(){
        //Expand the west region on click
        Ext.getCmp('region_west').expand();
      }
    }
  }
});

give an id to your west region and add listener like below

var tree1 = Ext.create('Ext.tree.Panel', {
    title : "    ",
    xtype : 'treepanel',
    store : store,
    placeholder: contentplaceHolder,
    id : 'tree1',
    region : 'west',
    height : 300,
    width : '19%',  
    useArrows : true,
    rootVisible : false,
    collapsible:true,
    collapsed: true,
    expand : true,
    listeners: {
    click: {
      element: 'el',
      fn: function() {
        Ext.getCmp('region_west').collapse();
      }
    }
  }