ExtJs的html布局

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

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%>">

    <title>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">    

<script type="text/javascript" src="<%=path%>/js/ext-base.js"></script>

<script type="text/javascript" src="<%=path%>/js/ext-all.js"></script>

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

  <script type="text/javascript">

   Ext.onReady(function(){

   var array =

   [

   '<table border=1>',

   '<tr><td colspan="3">112</td></tr>',

   '<tr><td>120</td><td colspan="2">119</td></tr>',

   '<tr><td colspan="3">110</td></tr>',

   ' </table>'

   ];

   var panel = new Ext.Panel(

   {

   id:'hwq',

   renderTo:'div',

   title:'Test',

   html:"<div id='getValue'>hwq</div>"

   });

   Ext.fly(Ext.get("getValue").dom.id).applyStyles("background-color:#ff0000");

   alert(Ext.get("getValue").dom.id);<%--

          var htmlArray =

           [   

                        '<table border=1 width="100%" height="100%">',   

  '<tr><td colspan="3">112</td></tr>',

  '<tr><td width="30%" id="panelShow"></td><td width="70%" id="panelShow2"></td></tr>',

  '<tr><td colspan="3">110</td></tr>',

                        '</table>'  

                      ];  

       var win = new Ext.Window({ 

        layout:'fit',

                width:'100%',

     height:'100%', 

                minimizable:true ,

                maximizable:true ,

           title:'使用html配置项自定义面板内容',   

           frame:true,//渲染面板   

           collapsible : true,//允许展开和收缩   

           autoScroll : true,//自动显示滚动条   

           applyTo :'div',   

           html:htmlArray.join(''),

           //items: new Ext.DatePicker(),//向面板中添加一个日期组件  

           bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色   

       });

       win.show();

      

       var panel = new Ext.Panel(

   {

   id:'hwq',

   layout:'fit',

   height : 150,   

             width : 250,

   renderTo:'panelShow',

   title:'Test',

   html:array.join('')

   });

          var panel = new Ext.Panel({   

            layout : 'card',   

            activeItem : 0,//设置默认显示第一个子面板   

            title:'Ext.layout.CardLayout布局示例',   

            frame:true,//渲染面板   

            height : 150,   

            width : 750,   

            applyTo :'panelShow2',   

            defaults : {//设置默认属性   

                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色   

            },   

            items: [   

                {   

                    title : '嵌套面板一',   

                    html : '说明一',   

                    id : 'p1'  

                },   

                {   

                    title : '嵌套面板二',   

                    html : '说明二',   

                    id : 'p2'  

                }   

                ,   

                {   

                    title : '嵌套面板三',   

                    html : '说明三',   

                    id : 'p3'  

                }   

            ],   

            buttons:[   

                {   

                    text : '上一页',   

                    handler : changePage   

                },   

                {   

                    text : '下一页',   

                    handler : changePage   

                }   

            ]   

        })   

        //切换子面板   

        function changePage(btn){   

            var index = Number(panel.layout.activeItem.id.substring(1));   

            if(btn.text == '上一页'){   

                index -= 1;   

                if(index < 1){   

                    index = 1;   

                }   

            }else{   

                index += 1;   

                if(index > 3){   

                    index = 3;   

                }   

            }   

            panel.layout.setActiveItem('p'+index);   

        }  --%> 

   })

  </script>

 

  </head>

 

  <body>

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

 

    

    

    

  </body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值