ext异步树加入子节点事件

chenxueyong

浏览: 342315 次
性别:
来自: 武汉

最近访客更多访客>>

crazybaby94

lam

harryanson

海波TIC

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

EXT CSS json HTML JavaScript

ext
ext异步树加入子节点事件
----------------------------------------------------------------------------------------------
public class SysMenuAction extends BaseAction {

    private static final Log log = LogFactory.getLog(SysMenuAction.class);

    private SysMenuManager sysMenuManager;

    /**
    * 如果parentMenuId参数不为空，就返加所有子菜单
    *
    * @param mapping
    * @param form
    * @param request
    * @param response
    * @return
    * @throws Exception
    */
    @SuppressWarnings("unchecked")
    public ActionForward getSysMenus(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {

        // 是否有权限
        // TODO Auto-generated method stub
        // 初始化编码方式和输出流
        response.setContentType("text/json; charset=utf-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }

        // 返回的结果
        Map<String, Object> result = new HashMap<String, Object>();

        try {

            // 取得参数

            // TODO Auto-generated method stub
            String parentMenuId = request.getParameter("id");

            String state = request.getParameter("state");

            // 2、取回数据：如果parentMenuId参数不为空就返回parentOrgId下面的所有直接子机构，否则返回所有机构
            List<TSysMenu> list = null;

            if (state == null || state.length() == 0) {
                state = "0";
            }
            if (parentMenuId == null || parentMenuId.length() == 0
                    || parentMenuId.trim().equals("0")) {
                TSysMenu obj = sysMenuManager.findSysMenuByTreeCode("0001");
                parentMenuId = obj.getMenuId();
            }
            list = sysMenuManager.findChildrenSysMenus(state, parentMenuId);

            // 转换成JSON格式
            // 不要转换成对象，要转换成数组
            JSONArray jsonArray = new JSONArray();
            for (TSysMenu menu : list) {
                Map map = new HashMap();

                map.put("id", menu.getMenuId());
                map.put("text", menu.getMenuName());
                map.put("href", menu.getMenuUrl());

                if (menu.getIsLeaf().equals("1")) {
                    map.put("leaf", true);
                } else {
                    map.put("leaf", false);

                }

                jsonArray.add(map);
            }

            // 输出到列表

            out.print(jsonArray);
            return null;

            //
        } catch (Exception e) {

            log.info(e);
            result.put("success", false);
            result.put("errors", e.toString());
        }

        return null;
    }

----------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>公司组织架构</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="../lib/ext/ext-all.js">
        </script>
    </head>
    <script>
        var menuUrl = 'http://localhost:8080/XX_BPM_JSP/sysMenus.bpm?method=getSysMenus';

        Ext.onReady(function(){
            //

            //右边具体功能面板区
            var contentPanel = new Ext.TabPanel({
                region: 'center',
                enableTabScroll: true,
                activeTab: 0,
                items: [{
                    id: 'homePage',
                    title: '信息列表',
                    autoScroll: true,
                    html: '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">信息列表</div>'
                }]
            });
            //北边，标题栏
            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]
                items: [grid_item, contentPanel]


            });
            //





            //西边，后台管理

            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: 200,
                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.AsyncTreeNode({
                id: '0',//根节点id
                text: '菜单',
                expanded: true

                //


                //



            });





            //树数据加载
            var data = new Ext.tree.TreeLoader({
                url: menuUrl

                //


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


            //子节点事件

            tree.on('click', function(node, event){

                //得到节点的href
                var href = 'executive.html';
                //var href=node.attributes.href;
                //
                event.stopEvent();
                var n = contentPanel.getComponent(node.id);

                if (!n) { //判断是否已经打开该面板
                    n = contentPanel.add({
                        'id': node.id,
                        'title': node.text,
                        closable: true, //通过html载入目标页
                        //html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="executive.html"></iframe>'
                        html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + href + '"></iframe>'
                    });
                }
                contentPanel.setActiveTab(n);
            });



            //


        });
    </script>
    <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>

分享到：

ext实现标签式浏览内容 | 实现Ext combox 动态数据加载

2009-03-03 10:30
浏览 2144
评论(1)
查看更多

1 楼 qiu768 2010-03-29

乱七八槽的

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论