iReport.views.SidebarDetailPanel = Ext.extend(Ext.Panel, {
  layout: "card",
  cls: "slideout-gene",

  initComponent: function() {
    
    this.dockedItems = [{
      xtype: 'toolbar',
      title: "genes",
      items: [{
        ui: 'back',
        text: 'Back',
        scope: this,
        handler: function(){
          this.ownerCt.setActiveItem(this.prevCard, {
            type: 'slide',
            reverse: true,
            scope: this,
            after: function(){
              this.destroy();
            }
          });
        }
      }]
    }];
    
    this.items = [
      new Ext.Panel({
        styleHtmlContent: true,
        scroll: "verticle",
        html:'<div id="geneDetail" style="display:none"><table class="detailTable"><tr ><td id="gdRelList"></td></tr><tr ><td id="gdFunList"></td></tr><tr ><td id="gdLocList"></td></tr><tr><td><table><tr><td  id="gdExpression" class="gdCats"></td><td  id="gdFunction" class="gdCats"></td><td  id="gdLocation" class="gdCats"></td></tr></table></td></tr><tr><td id="gdDesc" class="detailDesc"></td></tr><tr><td id="gdDiseaseList"></td></tr><tr><td id="gdProcessList"></td></tr><tr><td id="gdPathwayList"></td></tr><tr><td id="gdGroupComplexList"></td></tr></table></div>'
      })
    ]
    
    iReport.views.SidebarDetailPanel.superclass.initComponent.call(this);
  }


})

Ext.reg('sidebarpanel', iReport.views.SidebarDetailPanel);