This always happens to me when I am using Open Office’s numbering to outline requirements. The page break is very annoying. When you try to remove it, it’ll pull one line of text up even with the line on the previous page. You can add a carriage return to separate the two lines, but you have to reformat the second line.

To get rid of this annoying space, you can start adding carriage returns where the space begins and keep adding them until you have started a new page. Then, you can highlight all the added carriage returns and hit the delete key and it gets rid of the invisible page break.

Note: This post does not cover the creation of the TabPanel, Toolbar and ToolbarButton with a Menu.

Step 1: Override the Ext.TabPanel. (Note: This was just added to a JavaScript file I added to my application. I did not modify the ext-all.js file)

Ext.override(Ext.TabPanel, {

  hideTabStripItem : function(item){
    //Don't hide if its the last tab
    var cnt = this.items.length;
    var visibleTabs = 0;
    for(var i = 0; i < cnt; i++ ){
      if(!this.isTabStripItemHidden(i)){
        visibleTabs++;
      }
    }
    if(visibleTabs > 1){
      item = this.getComponent(item);
      var isactive = (item == this.activeTab);	    

      var el = this.getTabEl(item);
      if(el){
        el.style.display = 'none';
          this.delegateUpdates();
      }

      if(isactive){
        //Set the next visible tab active
        var curIndx = 0;
        var indx = 0;
        for(var i = 0; i < cnt; i++ ){
          var tab = this.getComponent(i);
          if(tab.id == item.id){
            curIndx = i;
            break;
          }
        }

        //Check for the next available tab
        for(var i = (curIndx+1); i < cnt; i++ ){
          if(!this.isTabStripItemHidden(i)){
            indx = i;
            break;
          }
        }

        if(indx == 0){
          //Check for a tab before the current one
          for(var i = 0; i < curIndx; i++ ){
            if(!this.isTabStripItemHidden(i)){
              indx = i;
              break;
            }
          }
        }

        this.setActiveTab(indx);
      }
    }
    if(visibleTabs == 1){
      throw "Could not hide the tab";
    }
  },

  unhideTabStripItem : function(item){
    item = this.getComponent(item);
    var el = this.getTabEl(item);
    if(el){
      el.style.display = '';
      this.delegateUpdates();
    }

    this.setActiveTab(item);
  },

  isTabStripItemHidden : function(item){
    item = this.getComponent(item);
    var el = this.getTabEl(item);
    if(el){
      return el.style.display == 'none';
    }
    //return true since it does not exist.
    return true;
  }
});

Step 2: Create a CheckItem with a listener to show/hide the tab (add it to a ToolbarButton’s Menu).

public CheckItem createTabCheckItem(String menuTitle, final String tabId, final TabPanel tabPanel){
  CheckItem ci = new CheckItem(menuTitle);
  ci.addListener(new CheckItemListenerAdapter() {
    public void onCheckChange(CheckItem item, boolean checked) {
      if (checked) {
        tabPanel.unhideTabStripItem(tabId);
      } else {
        try {
          tabPanel.hideTabStripItem(tabId);
        } catch (Exception e) {
          item.setChecked(true);
        }
      }
    }
  });
  ci.setHideOnClick(false);
  return ci;
}