ext布局：accordion and tree

最新推荐文章于 2025-06-21 09:46:44 发布

原创最新推荐文章于 2025-06-21 09:46:44 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #Google #HTML

EXT 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ExtJS框架搭建一个企业级的应用界面，包括标题栏、状态栏、功能菜单等部分，并展示了如何集成树形面板来管理公司的组织架构。


<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 north_item = new Ext.Panel({
                title: '你的公司公司组织架构',
                region: 'north',
                contentEl: 'north-div',
                split: true,
                border: true,
                collapsible: true,
                height: 50,
                minSize: 50,
                maxSize: 120
            });

            //南边，状态栏
            var south_item = new Ext.Panel({
                title: '版权所有',
                region: 'south',
                contentEl: 'south-div',
                split: true,
                border: true,
                collapsible: true,
                height: 50,
                minSize: 50,
                maxSize: 120
            });

            //树
            //设置树形面板


            //中间的中间，功能菜单
            var grid_item = new Ext.Panel({            
                region: 'west',                
                el: 'center-center',                
                title: '功能菜单',    
                split: true,
                collapsible: true,
                titlebar: true,
                collapsedTitle: '内容',
                height: 200,
                width: 200,
                minSize: 100,
                maxSize: 400
            });


            //中间的南边,信息列表
            var center_south_item = new Ext.Panel({
                region: 'center',
                contentEl: 'center-south',
                title: '信息列表',
                split: true,
                collapsible: true,
                titlebar: true,
                collapsedTitle: '内容'
            });

            //中间
            var center_item = new Ext.Panel({
                region: 'center',
                layout: 'border',
                items: [grid_item, center_south_item]
            });


            //西边，后台管理
            var managerUrl = "http://www.google.com";
            var managerUrlName = "搜索";
            var west_item = new Ext.Panel({
                title: '后台管理',
                region: 'west',
                contentEl: 'west-div',
                split: true,
                border: true,
                collapsible: true,
                width: 120,
                minSize: 120,
                maxSize: 200,
                layout: "accordion",
                layoutConfig: {
                    animate: true
                },
                items: [{
                    title: "系统管理",
                    html: '<div id="tree"></div>'
                }, {
                    title: "我的任务",
                    html: '任务'                
                }, {
                    title: "流程管理",
                    html: "流程管理"
                }]
            });

            new Ext.Viewport({
                layout: "border",
                items: [north_item, south_item, west_item, center_item]
            });

            //设置树形面板
            //定义树的跟节点
            var root = new Ext.tree.TreeNode({
                id: "root",//根节点id
                text: "公司"
            });

            //定义树节点
            var c1 = new Ext.tree.TreeNode({
                id: 'c1',//子结点id
                text: '研发中心'
            });

            root.appendChild(c1);//为根节点增加子结点c1
            //生成树形面板
            var tree = new Ext.tree.TreePanel({
                renderTo: "tree",
                root: root,//定位到根节点
                animate: true,//开启动画效果
                enableDD: false,//不允许子节点拖动
                border: false,//没有边框
                rootVisible: true//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
            });
        });
    </script>

</head>

<body>
    <div id="north-div"></div>
    <div id="south-div"></div>
    <div id="west-div"></div>
    <div id='center-center'></div>
    <div id='center-south'></div>
</body>

</html>