title: Fitting the tree into the screen with Ext JS
body: <p>The view port is not displaying a scroll-bar when I reduce the screen size manually and I need the button to be at the bottom.</p>
  
  <p>I have tried <code>bbar</code>, <code>dockedItems</code>, adding <code>treebuttons</code> in different manners but nothing seems to work . If you could help me fix the height issue with buttons at the bottom and with option to scroll it would be great.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>Ext.Loader.setConfig({
       enabled: true
  });
  
  Ext.require([
      'Ext.data.*',
      'Ext.grid.*',
      'Ext.tree.*',
  ]);
  
  Ext.onReady(function() {
      Ext.QuickTips.init();
      Ext.define('ServiceList', {
          extend: 'Ext.data.Model',
          fields: [
              {name:'id', type:'int'},
              {name:'name', type:'string'}
          ]
      });
  
  var appStore = Ext.create('Ext.data.Store', {
          model: 'ServiceList',
          proxy: {
              type: 'ajax',
              url: 'json/appdata.json',
              reader: {
                  root: 'services',
                  type: 'json'
              }
          }
      });
  
  Ext.define('treeModel', {
      extend: 'Ext.data.Model',
      fields: [
          {name: 'text',     type: 'string'},
          {name: 'column_id',     type: 'string'}
      ]
  });
  
  var treeAjax = Ext.Ajax.request({
       url: 'json/dynamicMenu.json',
       method: 'get', 
       success:function(response){
          console.log("treeAjax Success");
          tree_response = Ext.JSON.decode(response.responseText);
          var treeStore = Ext.create('Ext.data.TreeStore', {
              model : 'treeModel',
              root : tree_response.response.body
          });
          var app;
          var tree = Ext.create('Ext.tree.Panel', {
              forceFit: true,
              id :'treepanel',
              title: 'MENUS',
              cls:'parentIcon childIcon',
              autoScroll: true,
              border: false,
              useArrows: true,
              height: '100%',
              animate: true,
              rootVisible: false,
              store: treeStore,
              //scrollable: true,
              viewConfig: {
                  plugins: {
                      ptype: 'treeviewdragdrop',
                      containerScroll: true
                  }
              },
              items: [{
                  xtype: 'treecolumn',
                  id: 'treecolumn',
                  sortable: true,
                  dataIndex: 'text'
              }],
              listeners: { 
                  itemclick: function(view, node) { 
                      description_panel.show();
                      nodeText=node.get('text');
                      nodeGiven=node.get('column_id');
                      Ext.getCmp('add').hide();
                      leafbox.reset();
                      Ext.getCmp('update').show();
                      Ext.getCmp('TFTxt').setValue(nodeText);
                      Ext.getCmp('TFGive').setValue(nodeGiven);
                      if(node.get('leaf')!=false)
                      {   
                          leafbox.hide();
                          appField.show();
                          description_panel.doLayout();
                          Ext.getCmp('addCol').disabled=true;
                      }
                      else
                      {   
                          leafbox.hide();
                          appField.hide();    
                          if (nodeText=="Edit"){
                              Ext.getCmp('addCol').disabled=false
                          }
                          else{
                              Ext.getCmp('addCol').disabled=true
                          }
                      };
                  }, 
              }
          });
  
      var treeButton= Ext.create('Ext.panel.Panel',{
          id: 'treedetails',
          docked: 'bottom',
          items : [{
              xtype:'button',
              id : 'addMenu',
              enable : true,
              text:'Add Menu',
              handler:function() {
                  appField.hide();
                  Ext.getCmp('update').hide();
                  Ext.getCmp('add').show();
                  leafbox.show();
                  description_panel.doLayout();
                  description_panel.getForm().reset();
              }
          },
          {
              xtype:'button',
              text:'Add Column',
              id:'addCol',
              handler:function() {
                  appField.hide();
                  leafbox.hide();
                  Ext.getCmp('update').hide();
                  Ext.getCmp('add').show();
                  description_panel.show();
                  description_panel.getForm().reset();
              }
          },
          {
              xtype:'button',
              text:'Delete Record',
              handler:function() {
                  alert('Data Has Been added');
                  value3=Ext
                          .getCmp('treepanel')
                          .getSelectionModel()
                          .getLastSelected();
                  value3.remove();
                  leafbox.hide();
                  appField.hide();
              }
          }]
  
       });
  
   var description_panel = Ext.create('Ext.form.Panel',{
          title: 'Menu Details',
          id: 'description_panel',
          autoScroll: true,
          flex: 1,
          scrollable: true,
          items : [{
              id : 'dataForm',
              items: [{
                  xtype:'textfield',
                  id: 'TFTxt',
                  name: 'as',
                  fieldLabel: 'Text',
                  allowBlank:false,
                  listeners : {
                      el:{
                          delegate : 'input',
                          click    : function() {
                                 Ext.getCmp('TFTxt').focus(true);
                          }
                      }
                  }
              },
              {
                  xtype:'textfield',
                  fieldLabel: 'Column ',
                  name: 'as',
                  id: 'TFGive',
                  allowBlank:false,
                  listeners:{
                      el:{
                          delegate : 'input',
                          click    : function() {
                                 Ext.getCmp('TFGive').focus(true);
                              }
                      }
                  }
              }],
              buttons:[{
                  id:'add',
                  text:'Add',
                  width:10,
                  handler:function() {
                      value3 = Ext
                                .getCmp('treepanel')
                                .getSelectionModel()
                                .getLastSelected();
                      value1 = Ext.getCmp('TFTxt').getValue();
                      value2 = Ext.getCmp('TFGive').getValue();
                      value4 = Ext
                                .getCmp('leafselection')
                                .items
                                .get(0)
                                .getGroupValue();
                      noderesult=nodecheck(value1, value3);
                      if(noderesult==true){   
                          if(value4=='2'){
                              var insertvalues = value3.createNode({
                                  text:value1, 
                                  column_id:value2, 
                                  leaf: false
                              });
                          }
                          else{
                              var insertvalues = value3.createNode({
                                  text:value1, 
                                  column_id:value2, 
                                  leaf: true
                              });
                          }
  
                          value3.appendChild(insertvalues);
                          alert('The menu has been added. Please expand to see the added menu');
                      }
                      else{
                          alert('Please choose a diffrent Name . Name already exist');
                          Ext.getCmp('TFTxt').focus(true);
                      }
                  }
              },
              {
                  id:'update',
                  text:'Update',
                  width:10,
                  handler:function() {
                      value3 = Ext
                                .getCmp('treepanel')
                                .getSelectionModel()
                                .getLastSelected();
                      console.log(value3.parentNode)
                      value1 = Ext.getCmp('TFTxt').getValue();
                      value2 = Ext.getCmp('TFGive').getValue();
                      value4 = Ext
                                .getCmp('leafselection')
                                .items
                                .get(0)
                                .getGroupValue();
                      noderesult = nodecheck(value1, value3);
                      if(noderesult==true){
                          if(value4=='2'){
                              var updatevalues = value3.set({
                                  text:value1, 
                                  column_id:value2, 
                                  leaf: false
                              });
                          }
                          else{
                              var updatevalues = value3.set({
                                  text:value1, 
                                  column_id:value2, 
                                  leaf: true
                              });
                          }
                          alert('The Data has been edited.');
                      }
                      else{
                          alert('Please choose a diffrent Name. Name already exist');
                          Ext.getCmp('TFTxt').focus(true);
                      }
                  }
              }]
          }] ,
          listeners:{
              render : function(){
                  this.hide();
              }
          } 
      });
  
  var appField =new Ext.form.ComboBox({
      fieldLabel: 'Application',
      id:'appchoice',
      store: appStore,
      displayField: 'name',
      valueField: 'id',
      typeAhead: true,
      mode: 'local',
      emptyText:'Choose number...',
      selectOnFocus:true,
      listeners : {
          'select' : function(combo, record){
              app=record[0];
              console.log(app);
          },
          render : function(){
              this.hide();
          }
      }
  });
  
  Ext.getCmp('dataForm').add(appField).hide;
  description_panel.doLayout(); 
  var leafbox =new Ext.form.RadioGroup({  
      id: 'leafselection',
      fieldLabel: 'Node Detail',
      columns: 1,
      items: [
          {boxLabel: 'Leaf', name: 'data', inputValue: 1},
          {boxLabel: 'Non Leaf', name: 'data', inputValue: 2, },
      ],
      listeners : {
          render : function(){
              this.hide();
          },
          change: function(radiogroup, radio) {
              if(radio.data==1){
                  appField.show();
              }
              else{
                  appField.hide();
              }
          }
      }
  });
  
  Ext.getCmp('dataForm').add(leafbox).hide;
  description_panel.doLayout(); 
  var panel = Ext.create('Ext.Viewport',{
      draggable: true,
      //width:'100%',
      //height: '100%',
      autoHeight : true,
      scrollable : true,
      //autoScroll: true,
      id : 'container',
      renderTo : Ext.getBody(),
      layout: 'hbox',
      border : true,
      items : [{
          width : '30%',
          height: '100%',
          items : [tree, treeButton]
      },
      {
          width : '70%',
          height: '100%',
          items : description_panel
      }]
  });
  panel.doLayout();
  function nodecheck(typedname,nodedata){
      var name=typedname;
      var data=nodedata;
      if(data.parentNode.get('text')==name){
          console.log(data.parentNode.get('text'));
          return false
      }
      else{
          data.parentNode.eachChild(function(child){
          console.log("child functon");
          if(child.get('text')==name){
              console.log(child.get('text'));
              return false
          }
      });
      if(data.hasChildNodes()){
          console.log(" data child enter");
          data.eachChild(function(child){
          if(child.get('text')==name){
              console.log(child.get('text'));;
              return false
          }
      });
      };
  }
  return true
  };
  }
  });
  });
  </code></pre>