extjs 之 Ext.Panel 用法

xblues

最近遇到一个需要可以用鼠标点击伸缩折叠的隐藏层的效果。实现方式很多：自己写javsscript，使用微软的 Ajax Toolkit 社区框架，或者使用第三方Ajax框架，例如Extjs等。

先看看自己写Javascript代码，怎么控制都好了，可是自己要写一大堆代码。
试着翻了一下微软社区的Ajax Toolkit，感觉使用起来需要配置太多的东西，还是比较繁杂。
Extjs的缺省效果不错，而且代码十分简练！但是帮助做的不够直接，我绕了不少弯路，下面我总结一下这个组件的用法。

• 把ExtJS库导入项目，就是把相关的JS，CSS，image保存在指定目录下。
• 在页面中导入JS文件，就是使用SCRIPT语句引入JS文件。
  

以上两部是使用extjs的基本配置，可以才找extjs网站上的相关帮助，我就不费口舌了。
接下来具体讲一下panel这个空间的使用方法。

在body中建立两个DIV，一个用于输入，一个用于输出。
比如你想把一段HTML元素放进伸缩面板里，就在这部分HTML用DIV标签包围起来，该这个DIV标签加上一个ID：content
再建立一个空的div用于输出，给这个div标签加一个ID：container

1. <div id="container" />
   
2. <div id="content">
   
3. ...........这里是伸缩面板里面的内容......
   
4. </div>

复制代码

在header中配置panel组件：

1. <script type="text/javascript">
   
2. Ext.onReady(function(){
   
3.         var p = new Ext.Panel({
   
4.         collapsed: true,
   
5.         collapsible: true,
   
6.         autoWidth: true,
   
7.         autoHeight: true,
   
8.         title: 'More...',
   
9.         contentEl: "content",
   
10.         renderTo: 'container'
    
11.     });
    
12. });
    
13. </script>

复制代码

解释一下上面的配置参数的作用：

• collapsed: true, 初始化时，伸缩面板是缩进状态
• collapsible: true, 这个面板具有伸缩功能
• autoWidth: true, 自动宽度
• autoHeight: true, 自动高度
• title: 'More...', 伸缩面板标题文字
• contentEl: "content", 输入内容
• renderTo: 'container' 输出
  

相关链接：

• 效果实例：http://extjs.com/deploy/dev/examples/panel/panels.html
• JS代码：http://extjs.com/deploy/dev/examples/panel/panels.js
• Panel配置帮助：http://extjs.com/deploy/dev/docs/output/Ext.Panel.html
• Extjs主页：http://extjs.com
  

huazhb

用jquery, 小很多, 很不错的

ritz

强烈推荐使用 JQuery
用过了你就不会用其他javascript library了

PS: 虫子你准签之后魅力无法挡啊，一个主题就吸引了两广告贴，弓虽！

xblues

JQuery不错，而且微软最近已经开始官方支持JQuery社区，在VS新版项目中缺省配置JQuery，在项目中拿过来就用，不需要自己配置了。

extjs的功能涵盖了JQuery，虽然库大了一点，但是界面效果却更强大，效果华丽地说。
FireFox3.1版本已经改进了Javascript的渲染速度，是原来3.0版本的三倍，我喜欢extjs。

当然，我也不排斥JQuery