FreeOZ论坛

标题: extjs 之 Ext.Panel 用法 [打印本页]

作者: xblues 时间: 13-10-2008 17:02
提示: 作者被禁止或删除, 无法发言 标题: extjs 之 Ext.Panel 用法
最近遇到一个需要可以用鼠标点击伸缩折叠的隐藏层的效果。实现方式很多：自己写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

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

复制代码

在header中配置panel组件：

<script type="text/javascript">
Ext.onReady(function(){
var p = new Ext.Panel({
collapsed: true,
collapsible: true,
autoWidth: true,
autoHeight: true,
title: 'More...',
contentEl: "content",
renderTo: 'container'
});
});
</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 时间: 14-10-2008 16:13
用jquery, 小很多, 很不错的

作者: ritz 时间: 16-10-2008 02:14
强烈推荐使用 JQuery
用过了你就不会用其他javascript library了

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

作者: xblues 时间: 16-10-2008 12:53
提示: 作者被禁止或删除, 无法发言 JQuery不错，而且微软最近已经开始官方支持JQuery社区，在VS新版项目中缺省配置JQuery，在项目中拿过来就用，不需要自己配置了。

extjs的功能涵盖了JQuery，虽然库大了一点，但是界面效果却更强大，效果华丽地说。

FireFox3.1版本已经改进了Javascript的渲染速度，是原来3.0版本的三倍，我喜欢extjs。

当然，我也不排斥JQuery

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/ibbs/)