ExtJs框架格局的使用
日期：2014-05-16 浏览次数：20484 次
?
下面是一个例子， 新建一个main.html页面
?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js">
? </script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
?<style type="text/css">
?html,body {
??font: normal 12px verdana;
??margin: 0;
??padding: 0;
??border: 0 none;
??overflow: hidden;
??height: 100%;
?}
?
?.empty .x-panel-body {
??padding-top: 0;
??text-align: center;
??font-style: italic;
??color: gray;
??font-size: 11px;
?}
?
?.x-btn button {
??font-size: 14px;
?}
?
?.x-panel-header {
??font-size: 14px;
?}
?</style>
?</head>
?<body>
?<script type="text/javascript">
?Ext.onReady(function() {
?
?? var addPanel = function(btn, event) {
?? var n;
?? n = tabPanel.getComponent(btn.id);
?? if (n) {
??? tabPanel.setActiveTab(n);
??? return;
?? }
?? n = tabPanel.add({
??? id : btn.id,
??? title : btn.text,
??? html : '<iframe width=100% height=100% src=' + btn.id + '.html />',
??? // autoLoad : '',
??? closable : 'true'
?? });
?? tabPanel.setActiveTab(n);
? }
?
? var item1 = new Ext.Panel({
?? title : 'Tariff Manager',
?? cls : 'empty',
?? items : [new Ext.Button({
??? id : 'tariff_program',
??? text : 'Tariff Program',
??? width : '100%',
??? listeners : {
???? click : addPanel
??? }
?
?? }),
?
?? new Ext.Button({
??? id : 'b1',
??? text : 'Tariff Fee',
??? width : '100%',
??? listeners : {
????? click : addPanel
??? }
?? })
?
?? ]
? });
?
? var item2 = new Ext.Panel({
?? title : 'Accordion Item 2',
?? html : '<empty panel>',
?? cls : 'empty'
? });
?
? var item3 = new Ext.Panel({
?? title : 'Accordion Item 3',
?? html : '<empty panel>',
?? cls : 'empty'
? });
?
? var item4 = new Ext.Panel({
?? title : 'Accordion Item 4',
?? html : '<empty panel>',
?? cls : 'empty'
? });
?
? var item5 = new Ext.Panel({
?? title : 'Accordion Item 5',
?? html : '<empty panel>',
?? cls : 'empty'
? });
?
? var accordion = new Ext.Panel({
?? region : 'west',
?? margins : '5 0 5 5',
?? split : true,
?? width : 210,
?? layout : 'accordion',
?? items : [item1, item2, item3, item4, item5]
? });
?
? var tabPanel = new Ext.TabPanel({
?? region : 'center',
?? enableTabScroll : true,
?? deferredRender : false,
?? activeTab : 0,
?
?? items : [{
??? title : 'index',
??? html : "<iframe width=100% height=100% src='images/homepage_bg.gif'>"
?? // html : "<a href='http://zhidao.baidu.com/'>aaa</a>"
?? // autoLoad :'b.jsp'
?? }]
? });
?
?var topPanel = new Ext.Panel({
??region:'north',
??margins:'5 0 5 5',
?//?width:1000,
?//?heigh: 200,
??html:"<iframe width=100% height=100% src='top.html'>"
?})
?
?
? var viewport = new Ext.Viewport({
?? layout : 'border',
?? items : [topPanel,accordion, tabPanel]
? });
?});
? </script>
</body>
</html>
然后再建一个top.html页面
?
<!DOCTYPE html>
<html>
? <head>
??? <title>top.html</title>
?
??? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
??? <meta http-equiv="description" content="this is my page">
??? <meta http-equiv="content-type" content="text/html; charset=UTF-8">
???
??? <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
? </head>
?
? <body background="blue">
?? <div align="center"
