`
lym6520
  • 浏览: 696856 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

ext之accordion布局

    博客分类：
  • EXT
EXTGoogleHTML 
阅读更多 
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
 <script>
        Ext.onReady(function(){
            var managerUrl = "http://www.google.com";
            var managerUrlName = "搜索";
            new Ext.Panel({
                renderTo: "hello",
                title: "容器组件",
                width: 500,
                height: 200,
                layout: "accordion",
                layoutConfig: {
                    animate: true
                },
                items: [{
                    title: "子元素1",
                    html: "这是子元素1中的内容"
                }, {
                    title: "子元素2",
                    html: "<a href=" + managerUrl + ">"+managerUrlName+"</a>"
                }, {
                    title: "子元素3",
                    html: "这是子元素3中的内容"
                }]
            });
        });
    </script>

</head>
    <div id="hello">
        </div>

<body>
</body>

</html>


效果图：
  • 大小: 14.7 KB
分享到：
| 写出一个漂亮的js代码！
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Accordion布局

    Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就 是说使用该布局的容器组件中的子元素是可折叠的形式。

    ExtJS 4 复杂 百叶窗(accordion)布局

    ExtJS 4 复杂 百叶窗(accordion)布局

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

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

    学习ExtJS accordion布局

    一、Accordion布局由类Ext.layout.Accordion定义，表示可折叠的布局，点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板。 layoutConfig：true表示在执行展开折叠时启动动画效果，...

    Ext中文详解

    accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

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

    ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦...

    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....

    Ext 开发指南 学习资料

    6.5.1. accordion就是QQ那样的伸缩菜单 6.5.2. CardLayout？其实就是Wizard啦。 6.5.3. 呼呼，TableLayout就是合并行，合并列 7. 低鸣吧！拖拽就像呼吸一样容易。 7.1. 如此拖拽，简直就像与生俱来的本能一样。 7.2....

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局（Vbox,Accordion,Table,Column） EXTJS4自学手册——EXT容器布局（Fit,Card,Border） EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件（表格） EXTJS4...

    ExtJS 2.0实用简明教程

    14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)...

    精通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 ...

    Extjs4.1.1

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

    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 ...

    ExtJs4_笔记.docx

    第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...

    精通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 ...

    深入浅出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 ...

    ExtAspNet_v2.3.2_dll

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

    ExtJs2.0简明教程

    ………32 5.6 Accordion布局……….……………………………………………………………………………………..……….33 5.7 Card布局……….……………………………………………………………………………………...

    TouchTreeGrid:Sencha Touch Tree Grid、Basic Grid 和 Accordion 组件示例

    TouchTreeGrid 是一个非常通用且易于实现的 Sencha Touch 自定义组件，它支持树网格、标准网格和传统的手风琴视图布局（全部由同一个组件）。 包括列排序和自定义数据渲染，例如逗号格式、货币、百分比和负值与正值...

    基于ExtJS3的后台管理系统模板

    3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...

Magicbox
Global site tag (gtag.js) - Google Analytics