ext:初学（2） -layout 和 tree的结合

最新推荐文章于 2021-12-02 14:10:15 发布

若行若冲

最新推荐文章于 2021-12-02 14:10:15 发布

阅读量1.9k

点赞数

文章标签： tree ext stylesheet function layout html

本文链接：https://blog.youkuaiyun.com/coolhe21cn/article/details/2284200

版权

本文介绍了一个使用ExtJS框架实现的复杂布局案例，包括顶部菜单栏、左侧导航树及中心内容区域等部分。通过具体代码展示了如何创建并组织这些组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接触ext已经有段时间了，但是一直没有找到如何在layout中嵌入tree或者tab的源码和方法。原因也是因为自己对js语言不是很了解的情况。不过看了大量的文章，昨天试验成功！！现在共享出来！！

mainForm.js

Ext.BLANK_IMAGE_URL = '../res/lib/ext2/resources/images/default/s.gif';

/* 主窗口 */
Ext.onReady(function() {
/* 设置提示消息的显示方式 */
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

Ext.Tree.init();

/* 　设置窗口 layout */
    var north, south, west, center;

/*================== 菜单区 ==================*/

//================== 关闭按钮
// 测试

function showResult(btn){
        //Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
        window.alert(btn);
    };

var actBtnClose = new Ext.Action({
        text: '登出',
        handler: function(){
        Ext.MessageBox.confirm('提示', '<span vlign="middle">确定登出本系统平台？</span>', showResult);
        },
        iconCls: 'bmenu-close'
    });

//================== 菜单
var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
            {
                text: '更换用户'
                //checkHandler: onItemCheck
            },
            {
                text: '更换角色'
                //checkHandler: onItemCheck
            }, '-',
            {
                text: '退出'
                //checkHandler: onItemCheck
            }]
})

var tb = new Ext.Toolbar();
    tb.render('north-div');

    tb.add('-','-',{
            text:'系统菜单',
            iconCls: 'bmenu', // <-- icon
            menu: menu // assign menu by instance
}, actBtnClose);

    /*================== Top 区 ==================*/
north = new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north-div',
                    titlebar: true,
                    border:false,
                    margins:'3 0 -12 5',
                    autoLoad: {url: 'template/Header.html', scripts: true, scope: this},
                    height:40});

/*================== 状态区 ==================*/
south = new Ext.Panel({ // raw
                    region:'south',
                    contentEl: 'south-div',
                    titlebar: true,
                    split:true,
                    height: 80,
                    minSize: 80,
                    maxSize: 200,
                    collapsible: true,
                    title:'信息提示',
                    margins:'0 0 0 0'});

    /*================== 导航区 ==================*/
    west = new Ext.Panel({
     region:'west',
                    id:'west-panel',
                    el:'west-div',
                    titlebar: true,
                    title:'功能导航',
                    autoScroll:true,
                    split:true,
                    width: 200,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins:'0 0 0 5',
                    layout:'accordion',
                    layoutConfig:{animate:false}
    })

/*================== 内容区 ==================*/
center = new Ext.Panel({region:'center',
               //margins:'5 5 5 0',
               cls:'empty',
               contentEl: 'center-div',
               bodyStyle:'background:#f1f1f1',
               autoScroll:true,
               html:'<br/><br/><empty center panel>'
               })

/*================== 内容组合 ==================*/
var viewport = new Ext.Viewport({
            layout:'border',
            items:[north, west, center]
    })
})

nav-tree.js

/* 菜单 */
Ext.Tree = function() {

//--------第一棵树
return {
  init : function(){
   var tree = new Ext.tree.TreePanel({
       el:'west-div'
   });

   var root = new Ext.tree.TreeNode({text:'偶是根'});
   var node1 = new Ext.tree.TreeNode({text:'偶是根的第一个枝子'});
   var node2 = new Ext.tree.TreeNode({text:'偶是根的第一个枝子的第一个叶子'});
   var node3 = new Ext.tree.TreeNode({text:'偶是根的第一个叶子'});
   node1.appendChild(node2);
   root.appendChild(node1);
   root.appendChild(node3);

   tree.setRootNode(root);
   tree.render();
  }
}
}();

mainForm.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title><bean:message key="index.jsp.title" />-登陆</title>

<meta http-equiv="content-type" content="text/html; charset=GB2312">






<script type="text/javascript" src="../res/lib/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../res/lib/ext2/ext-all.js"></script>

<script type="text/javascript" src="../res/lib/ext2/ext-lang-zh_CN.js"></script>


<link rel="stylesheet" type="text/css" href="../res/lib/ext2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../res/ext/lib/ext2/ext-patch.css" />


<script type="text/javascript" src="js/mainForm.js"></script>
<script type="text/javascript" src="js/nav-tree.js"></script>


<link rel="stylesheet" type="text/css" href="styles/mainForm.css" />
<link rel="stylesheet" type="text/css" href="styles/menu.css" />


</head>

<body>

<div id="Header"></div>

<div id="north-div"></div>

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