ExtJs框架布局的使用

最新推荐文章于 2025-05-10 13:27:01 发布

zuimeitulip

最新推荐文章于 2025-05-10 13:27:01 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb前端技术文章标签： javascript ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zuimeitulip/article/details/84172967

JavaWeb前端技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架实现的Web应用布局实例，包括主页面main.html和顶部导航栏页面top.html的源代码。该应用采用了多种ExtJS组件，如面板（Panel）、按钮（Button）、选项卡面板（TabPanel）等，并实现了通过点击按钮动态加载不同内容到选项卡面板的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是一个例子，新建一个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">

</head>

<body background="blue">
<div align="center"><h2>Welcome top</h2></div>
</body>
</html>

运行一下就知道就怎么回事啦，代码需要自己研读一下

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。