ExtJs实现面板折叠太简单了,效果超酷...........
第一步:导入必须的样式文件和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>
好了。。。。这就已经实现了折叠面板了,是不是很酷啊。。太简单了。。。。
<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>
好了。。。。这就已经实现了折叠面板了,是不是很酷啊。。太简单了。。。。