`

Ext JS 入门之panel,TabPanel的简单使用

EXTCSSJavaScript体育XHTML
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Panel</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script> 
     
   <mce:script type="text/javascript"><!--  
   Ext.onReady(function()  
   {  
    var panel=new Ext.Panel  
    (  
    {  
    renderTo:"hello",  
    title:"hello",  
    width:300,  
    height:200,  
    html:'<h1>Welocome to http://blog.csdn.net.ws_hgo</h1>'  
    }  
    );  
    }  
    )  
    
     
// --></mce:script> 
</head> 
<body> 
<div id="hello"></div> 
 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Panel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script>
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script>
  
   <mce:script type="text/javascript"><!--
   Ext.onReady(function()
   {
    var panel=new Ext.Panel
    (
    {
    renderTo:"hello",
    title:"hello",
    width:300,
    height:200,
    html:'<h1>Welocome to http://blog.csdn.net.ws_hgo</h1>'
    }
    );
    }
    )
 
  
// --></mce:script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
 
view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>TabPanel</title> 
        <link href="../extjs/ext-3.2.0/resources/css/ext-all.css" mce_href="extjs/ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/adapter/ext/ext-base.js" mce_src="extjs/ext-3.2.0/adapter/ext/ext-base.js"></mce:script> 
    <mce:script type="text/javascript" src="../extjs/ext-3.2.0/ext-all.js" mce_src="extjs/ext-3.2.0/ext-all.js"></mce:script> 
     
   <mce:script type="text/javascript"><!--  
   Ext.onReady(function()  
   {      
      var tabpanel=new Ext.TabPanel  
      (  
      {  
        width:300,  
        height:200,  
        activeTab:0,//默认显示第一个panel的内容  
        enableTablScroll:true,  
        items:[  
               {title:'娱乐',height:30,html:'这里是娱乐新闻版块'},  
               {title:'体育',height:30,html:'这里是体育新闻版块'},  
               {title:'科技',height:30,html:'这里是科技新闻的版块'}  
              ]  
       }  
       );  
       tabpanel.render("tab");//填充到id为tab的区域  
   }  
   )  
     
// --></mce:script> 
</head> 
<body> 
<div id="tab"></div> 
</body> 
</html> 
分享到：
| C编写的词法分析器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics