Ext JS 入门之panel,TabPanel的容易使用
日期：2014-05-16 浏览次数：20418 次
Ext JS 入门之panel,TabPanel的简单使用
<!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>
<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>
?
</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:'这里
<!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:'这里
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
