`
lym6520
  • 浏览: 704164 次
  • 性别: 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代码！
评论
发表评论

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

相关推荐

    ExtjS--accordion布局

    在源码层面，ExtJS 的accordion布局依赖于Ext.layout.container.Accordion类。这个类实现了布局逻辑，包括计算每个面板的高度，处理面板的展开和折叠事件等。开发者可以通过阅读源码深入理解其内部工作原理，以便...

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

    这个实例结合了多个技术，包括Accordion布局、Servlet、Struts2以及JSON数据交互，以及Ext.tree.Panel组件，以创建一个功能丰富的用户界面。 Accordion布局是ExtJS中的一个布局管理器，它允许在一个区域内组织多个...

    Accordion布局

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

    Ext.Viewport布局

    `Ext.Viewport`布局是Ext JS框架中构建复杂用户界面的关键组件之一。通过合理的属性配置和布局设计，它可以有效地管理页面上的多个区域和组件，实现灵活的布局调整和动态内容加载。对于希望利用Ext JS创建高级Web...

    Ext10种布局

    - **定义**：通过 `Ext.layout.Accordion` 类定义，布局名称为 `accordion`。 - **特点**：允许容器中的子元素以可折叠的形式展示。 - **使用技巧**：默认情况下，使用 `ExtAccordion` 布局时会自动展开第一个子元素...

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

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

    Ext介绍以及_ext页面布局

    4. **Border布局**：Border布局是最常用的布局之一，它将容器分为五个区域：东(east)、南(south)、西(west)、北(north)和中心(center)。每个区域可以独立放置组件，提供灵活的页面布局。 例如，创建一个包含北部...

    Ext常用布局

    Fit布局的类为`Ext.layout.FitLayout`，它有两个子类：`AccordionLayout`和`CardLayout`。`AccordionLayout`用于折叠面板布局，而`CardLayout`则用于在一个区域内展示一组卡片，每次只显示一张。设置Fit布局非常简单...

    学习ExtJS accordion布局

    Accordion布局由`Ext.layout.Accordion`类定义。这种布局模式的主要特点在于，当用户点击面板的标题或者展开/折叠按钮时，只会有一个面板处于展开状态，其他所有面板都将被折叠。这使得用户能够逐个查看内容，而不会...

    sencha touch accordion(折叠) 布局

    `Accordion`布局管理着包含在它内部的所有组件（通常是`Ext.container.Container`的子项，如`Ext.Panel`），这些组件在默认情况下会被隐藏，只有当用户点击时才会展开。布局会自动调整每个面板的高度，确保每次只有...

    ext布局(Layout.html)例子.pdf

    在EXT中，布局管理器是核心组件之一，它负责处理容器中的子组件的排列和大小调整。以下是对EXT布局中几种常见布局方式的详细说明： 1. Column布局： Column布局将容器分割成多列，每列的宽度可以通过`columnWidth`...

    GWT-ext 布局示例

    在本文中，我们将深入探讨GWT-Ext框架中布局管理器的应用，这是一个基于Google Web Toolkit (GWT) 和 ExtJS 的强大控件库，用于快速开发富互联网应用程序。本系列文章的第三部分主要关注各种布局的实现和使用技巧，...

    Ext4.0学习总结及功能详解(特别详细)

    通过以上对accordion布局和border布局的详细解析，我们可以看到Ext4.0如何提供了灵活的界面设计工具，以满足各种复杂应用的需求。这些布局方式使得开发者可以轻松地组织和管理界面元素，创建出用户友好的Web应用。

    ext实例 ext操作步骤

    1. **Accordion布局**：这种布局方式使得每个子组件可以折叠，适用于展示大量同类信息但有限的空间。布局由`Ext.layout.Accordion`定义，每个子组件按照折叠的方式呈现。 2. **Border布局**：此布局将容器分为五个...

    Ext教程ext2-Ext简易教程

    1. Accordion布局：这种布局将子组件折叠在一起，一次只显示一个。 2. Border布局：将容器分为五个区域（东、南、西、北、中），每个子组件可以指定在哪个区域内显示。 3. Column布局：将容器视为一列，并通过`...

    Ext4详细解读

    3. **适用范围**：Accordion布局主要应用于`Ext.Panels`以及所有`Ext.panel.Panel`子项中。 **配置参数详解：** - `title`: 面板的标题。 - `layout`: 指定为`'accordion'`来使用Accordion布局。 - `width`/`...

    ext布局(Layout.html)例子[参考].pdf

    5. **Accordion布局**：每个子组件可以折叠和展开，只显示一个展开的项。通过`layout: "accordion"`启用，`layoutConfig`中的`animate`属性可以控制展开动画的启用，如`{animate: true}`。 6. **Card布局**：同一...

    ext的课件，ppt版,适合有面向对象基础人士

    1. Accordion布局：这种布局允许子组件折叠和展开，每个子组件占据一行。它由`Ext.layout.Accordion`定义，适合展示分段内容，如FAQ或层级菜单。 2. Border布局：基于`Ext.layout.BorderLayout`，它将容器划分为五...

    Ext中文详解

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

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