zoukankan      html  css  js  c++  java
  • Accordion折叠布局

      Ext.layout.container.Accordion折叠布局,对应面板布局配置项的Accordion。该布局可以包含多个子面板,任何时候都只有一个子面板处于打开状态,每个面板都内置了对展开和收缩功能的支持。

    1、Ext.layout.container.Accordion主要配置

    配置项类型说明
    activeOnTop Boolean 是否保持展开的子面板处于父面板的顶端,true则交换当前展开面板到顶端,false则保持原来的位置不动
    animate Boolean 设置在展开或收缩子面板时是否使用滑动方式,true则采用滑动方式,默认为true
    collapseFirst Boolean 设置为true则折叠按钮总作为面板标题工具按钮的第一个渲染,默认false作为最后一个被渲染
    fill Boolean 设置当前子面板是否自动调整高度充满父面板的剩余空间,true则充满,默认为true
    multi Boolean 是否允许同时打开多个子面板,默认为false
    titleCollapse Boolean 是否允许通过点击子面板的标题来展开或收缩面板,true则允许,默认为true

    2、Ext.layout.container.Accordion示例

    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.layout.container.Accordion示例</title>
        <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create("Ext.panel.Panel", {
                    title: "Ext.layout.container.Accordion示例",
                    frame: true,
                     300,
                    height: 200,
                    renderTo: Ext.getBody(),
                    bodyPadding: 5,
                    layout: "accordion",
                    defaults: {
                        bodyStyle: "background-color:#FFFFFF"
                    },
                    items: [{
                        title: "嵌套面板一",
                        html: "面板一"
                    }, {
                        title: "嵌套面板二",
                        html: "面板二"
                    }, {
                        title: "嵌套面板三",
                        html: "面板三"
                    }]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>

    效果图:

  • 相关阅读:
    Win10 UWP Tile Generator
    Win10 BackgroundTask
    UWP Tiles
    UWP Ad
    Win10 build package error collections
    Win10 八步打通 Nuget 发布打包
    Win10 UI入门 pivot multiable DataTemplate
    Win10 UI入门 导航滑动条 求UWP工作
    UWP Control Toolkit Collections 求UWP工作
    Win10 UI入门 SliderRectangle
  • 原文地址:https://www.cnblogs.com/libingql/p/2467262.html
Copyright © 2011-2022 走看看