ext之accordion布局

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
 <script>
        Ext.onReady(function(){
            var managerUrl = "http://www.google.com";
            var managerUrlName = "搜索";
            new Ext.Panel({
                renderTo: "hello",
                title: "容器组件",
                width: 500,
                height: 200,
                layout: "accordion",
                layoutConfig: {
                    animate: true
                },
                items: [{
                    title: "子元素1",
                    html: "这是子元素1中的内容"
                }, {
                    title: "子元素2",
                    html: "<a href=" + managerUrl + ">"+managerUrlName+"</a>"
                }, {
                    title: "子元素3",
                    html: "这是子元素3中的内容"
                }]
            });
        });
    </script>

</head>
    <div id="hello">
        </div>

<body>
</body>

</html>


效果图:
ext之accordion布局_第1张图片

你可能感兴趣的:(html,ext,Google)