zoukankan      html  css  js  c++  java
  • EXT学习笔记之一 accordion布局

    accordion布局,先上图,后贴代码

    image

    其实就是类似于QQ那样的可折叠的菜单效果

    代码如下

    Ext.onReady(function() {
        /*------------------------------------------
            west,Panel
        ------------------------------------------*/
        var west = new Ext.Panel({
            title:'菜单分类 - all menus',
            region: 'west',
            margins: '5 0 5 5',
            //collapsible:true,
            border:true,
            split: true,
             300,
            layout: 'accordion',
            items: [
                new Ext.Panel({
                    title: '机票政策管理 - policy',
                }),
                new Ext.Panel({
                    title: '机票订单管理 - orders',
                }),
                new Ext.Panel({
                    title: '会员积分管理 - scores',
                }),
                new Ext.Panel({
                    title: '系统菜单管理 - menus',
                }),
                new Ext.Panel({
                    title: '内部雇员管理 - employee',
                }),
                new Ext.Panel({
                    title: '其它信息 - other information',
                })]
        });
    
        /*------------------------------------------
            north,Viewport
        ------------------------------------------*/
        var north = new Ext.Viewport({
            xtype: 'box',
            region: 'north',
            applyTo: 'header',
            height: 30
        });
    
        /*------------------------------------------
            center,Panel
        ------------------------------------------*/
        var center = new Ext.Panel({
            id: 'content-panel',
            region: 'center', // this is what makes this panel into a region within the containing layout
            layout: 'card',
            margins: '5 0 5 0',
            activeItem: 0,
            border: false,
            items: [
                new Ext.Panel({
                    id: 'start-panel',
                    layout: 'fit',
                    bodyStyle: 'padding:25px',
                    contentEl: 'start-div'
                })
            ]
        });
    
    
        /*------------------------------------------
            viewport,Viewport
        ------------------------------------------*/
        new Ext.Viewport({
            layout: 'border',
            title: 'korn',
            items: [north, west, center],
            renderTo: Ext.getBody()
        });
    });

    官方文档

  • 相关阅读:
    去掉myeclipse的预览窗口
    tomcat访问
    传值:web.xml传递参数 即在Servlet中获取web.xml里的值
    URI、URL、请求、响应、常见状态代码
    为什么使用HttpServlet?http协议特点、servlet
    HackerRank Ice Cream Parlor
    HackerRank and MiniMax
    HackerRank Extra long factorials
    Longest Increasing Common Subsequence (LICS)
    UVa 12505 Searching in sqrt(n)
  • 原文地址:https://www.cnblogs.com/kkun/p/1537026.html
Copyright © 2011-2022 走看看