ExtJs系列(2)--Ext.Panel

最新推荐文章于 2024-09-05 12:57:53 发布

net511

最新推荐文章于 2024-09-05 12:57:53 发布

阅读量613

点赞数

分类专栏： ExtJs系列文章标签： extjs html stylesheet button server 工具

本文链接：https://blog.csdn.net/net511/article/details/5317796

版权

ExtJs系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天介绍extjs中的Panel组件。

Ext.Panel相当常用。子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件。

用法如下：

function getPane()
{
var cfPane={
id:'pane1',
title:'title',
width:500,
height:500,
renderTo:document.getElementById("dv1"),
collapsible:true,
html:"<a href='#'> hello pane</a>"

}

var pan=new Ext.Panel(cfPane);
}

Ext.onReady(function(){
document.getElementById("Button1").οnclick=getPane;
})

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dv1">
        <input id="Button1" type="button" value="pane" />
    </div>
    </form>
</body>
</html>

//配置参数(只列举部分常用参数)
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false

10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题

14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.

15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面
//关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：

net511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs系列(2)--Ext.Panel

今天介绍extjs中的Panel组件。Ext.Panel相当常用。子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件。用法如下：http://www.w3.org/1999/xhtml"> 无标题页 function getPane(){ var cfPane={ id:pane1,
复制链接

扫一扫