Ext.NET MVC – Define the Customized Tab Panel Header by using HTML and CSS

Ext.NET MVC – Define the Customized Tab Panel Header by using HTML and CSS

 
   CSS
 
   #header_root
   {
     clear:both;
   }
 
   #header_left
   {
     float:left;
   }
 
   #header_right
   {
     float:right;
   }
 
   #logout_btn
   {
     margin: 70px 30px 0px 0px;
     padding: 5px 5px 5px 5px;
     font-size: 10pt;
     font-weight: bold;
     cursor: pointer;
     color:#000000;
   }
 
   #logout_btn:hover
   {
     background-color:#FFFF00;
   }
 
   Tab Panel View
 
   @{
     string Header = “< div id='header_root'>";
     Header += “< div id='header_left'>";
     Header += “<img src='… …' width='100' />";
     Header += “</div>";
     Header += “< div id='header_right'>";
     Header += “< div id='logout_btn'>Logout</div>";
     Header += “</div>";
     Header += “</div>";
   }
 
   @(X.Window()
 
     … …
 
     .Maximized(true)
     .Maximizable(false)
     .Closable(false)
     .Header(false)
 
     … …
 
     .Items(
 
       X.PanelHeader().Region(Region.North).Html(Header),
 
       … …
 
     )
   )