第一步：导入必须的样式文件和JavaScript文件:

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

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

<script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"></script>

<script type="text/javascript" src="build/locale/ext-lang-zh_CN.js"></script>


第二步：自己写代码编程：

<script type="text/javascript" >

    Ext.onReady(function(){        //Ext程序的开始
            new Ext.Panel({            //实例化一个面板

            renderTo:"div1",          //设置面板要呈现的地方,,可以在下面body声明一个div，用这个div的id来填充

            title:"可折叠面板",        //添加面板的标题

            width:300,                //设置面板的宽度

            height:200,                //设置面板的高度

            collapsible:true,            //设置面板可以折叠

          html:"<font color=red>单击右上角的小箭头可以折叠面板....</font>"    //设置面板的内容HTML

});

</script>

<body>

<div id="div1">test...................</div> 

</body>


好了。。。。这就已经实现了折叠面板了，是不是很酷啊。。太简单了。。。。