使用Ext2.1布局首页

使用Ext2.1布局首页(原创) (2008-09-03 15:01:32)

1.思路

整体采用东西（左右）框架，所以选择 Ext.Viewport来布局，左框架有面板来布局，即Ext.Panel，右框架也是一个面板，不过为了在面板中显示jsp、html等网页则用iframe来嵌套其中。而左面板中可以放各种超连结，动态地使得右面板中的内容改变。

2.代码

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<title>aaa</title>
        //---------------ext的核心js要放在正解的路径---------------------

<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">


<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
   <script type="text/javascript">
   Ext.onReady(function(){


        //--------------------个个助理子系统---------------------------------------------
           var btn11 = new Ext.Button({
             text:'我要看日历',
            type:'button',
            id:'login',
            enableToggle:true,
            pressed: true,
            allowDepress:true,
            toggleHandler:chushiyemian
           });



         var item1 = new Ext.Panel({
                title: '个人助理',
                autoScroll:true,
                iconCls:'my-icon',
                items:[btn11],

                cls:'empty',
                iconCls:'nav'
            });

   var viewport = new Ext.Viewport({
            layout:'border',
            items:[
               new Ext.Panel({
                region:'west',
                id:'west-panel',
                split:true, //可以左右调整宽度
                width: 160, //宽度
                 minSize: 120,
                 maxSize: 400,
                 margins:'0 0 0 5',
                title:'测试项目',
                titleCollapse:true, //通过item的标题来打开或关闭
                collapsible:true,
                layoutConfig:{
                    animate:true
                },
                layout:'accordion',
             items: [item1]

            }),
            new Ext.Panel({
            title: '主页信息',
            region:'center',
            collapsible:false,
            autoScroll:true,
            id: 'container',
            width:600,
            html:'<iframe id="content-iframe_in_out" frameborder="no" style="width:100%;height:100%"></iframe>'
                        })
             ]
        });

       function chushiyemian() //chushiyemian对应button的toggleHandler事件
       {
         Ext.get('content-iframe_in_out').dom.src='Calendar.htm'; //你要连接的地址
       }
       viewport.render('index');
    });
</script>

</head>

<body >

   <div id="index"></div>

</body>
</html>
3.显示效果

4.改进

上例只是最为简单和实用的一种布局，实际上可以在上面做一些改进，比较在在面板中加入新的面板，或者将超连接的驱动改成文本超连接，而不是用按钮超连接等。

posted @ 2008-09-18 15:44 XGU_Winner 阅读(457) 评论(0) 收藏举报

刷新页面返回顶部

使用Ext2.1布局首页

公告