`

Ext布局实例-----accordion布局

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>accordionLayout.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
layout:'accordion',
layoutConfig:{
activeOnTop:true,
fill:true,
hideCollapseToo:false,
titleCollapse:true,
animate:true
},
title:'Ext.layout.Accordion 布局示例',
frame:true,
height:150,
width:250,
applyTo:'panel',
items:[
{
title:'李小龙',
html:'李小龙'
},
{
title:'李连杰',
html:'李连杰'
},
{
title:'成龙',
html:'成龙'
},
{
title:'甄子丹',
html:'甄子丹'
}





]

});

});



</script>

</head>

<body>
<div id="panel"></div>
</body>
</html>

分享到:
评论

相关推荐

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    Extjs4.1.1

    第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第...

    深入浅出Extjs4.1.1

    8、EXtJS布局模式-Auto布局、Fit布局、Accordion布局 9、ExtJS布局模式-Card、Anchor、Absolute( r! k$ G/ Q, u! c' U 11、ExtJS布局模式-Box布局、使用ViewPort布局首页0 j( d' o {. g$ T 12、ExtJS之Ext常用函数4 ...

    Ext Js权威指南(.zip.001

    9.4.6 手风琴布局:ext.layout.container.accordion / 447 9.4.7 锚固布局:ext.layout.container.anchor / 448 9.4.8 绝对定位布局:ext.layout.container.absolute / 450 9.4.9 边框布局:ext.layout....

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -增加Accordion和Tree配合使用的示例(other\accordion_tree_run.aspx)。 -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除PageLayout控件,此控件可以使用BorderLayout和指定PageManager的...

    ExtAspNet_v2.3.2_dll

    -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等,其中的Close全部改为Hide。 -增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和...

    精通JS脚本之ExtJS框架.part1.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

    ExtJSWeb应用程序开发指南(第2版)

    5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 ...

    精通JS脚本之ExtJS框架.part2.rar

    11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...

Global site tag (gtag.js) - Google Analytics