ExtJs布局

ExtJS布局与动态面板

最新推荐文章于 2024-12-24 17:53:29 发布

原创最新推荐文章于 2024-12-24 17:53:29 发布 · 522 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #stylesheet #path #button #function #string

panel.add({text:"添加面板"});
panel.doLayout();
var p = panel.getCmp(2);
alert(p.title);
panel.remove(num/id)

------------------
<%@ 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 panel = new Ext.Panel(
        {
            width:600,
            height:300,
            renderTo:"grid-example",
            title:'father',
            layout:'column',
            items:
            [
                {
                    title:'面板1',
                    columnWidth:0.33
                },
                {
                    title:'面板1',
                    columnWidth:0.33
                },
                {
                    title:'面板1',
                    columnWidth:0.33
                },
                {
                    title:'面板2',
                    columnWidth:0.33
                },
                {
                    title:'面板3',
                    columnWidth:0.33
                },
                {
                    title:'面板2',
                    columnWidth:0.33
                },
                {
                    title:'面板3',
                    columnWidth:0.33
                }
            ]
        });
        var button = new Ext.Button({
            text:'addPanel',
            renderTo:'id_button',
            handler:function()
            {
                panel.add({text:"添加面板"})
                //panel.remove(1)
            }
        });
    });

    </script>
</head>

<body>
   <div id='grid-example'><div id="id_button"></div></div>
</body>
</html>