extjs中怎样实现动态主菜单的简单介绍

本文目录一览:

ExtJS中怎样实现动态主菜单

Ext.Ajax.request({

//后台请求数据

url: ‘xxx.php’,

success: function (response){

var data = Ext.decode(response.responseText);

//创建空的工具条

var MenuBar = Ext.create(‘Ext.toolbar.Toolbar’);

for(var i=0;ilt;data.length;i++){

var Menu = data[i];

MenuBar.add({

text: Menu.text

handler: 跳转页面函数,一般要传参

});

}

MenuBar.doLayout();

});没有亲测过,也许会有点问题,遇到了再追问吧

关于Extjs中 gridpanel里我想实现动态的行浮动菜单

tip是干啥的啊,就是提示呗,是放在目标上出来的一行提示 。。。 鼠标放tip上有什么用?

想不消失就把目标的mouseout截了啊

恩,浮动菜单可以的,往里加呗

关于extjs的问题,extjs的导航菜单问题

Ext.menu.Menu 对象里的ITEM 有两种类型。1,Ext.menu.Item。2,Ext.menu.Menu的嵌套

你说的3级菜单就是Ext.menu.Menu+Ext.menu.Menu+Ext.menu.Item的嵌套。

具体用add方法添加。

部分代码如下:

var hmenu_copy = new Ext.menu.Menu();

hmenu_copy.add({

text:’level2′,

//scope: this,

iconCls:’x-group-by-icon’,

menu:[

{text:’level3′,handler: },

]

});

由于是项目截码,具体自己加其他环境。还有问题请追加

extjs导航面板里面菜单动态生成的怎么做

ajax请求后台,然后遍历返回结果,每个结果new 一个item,添加到menu就好了

Extjs中如何使用数据库中的数据,创建动态菜单

登录验证 , 然后 将你的菜单返回 , 格式无所谓 , 只要你最后能从JS中解析出来

将菜单加到一个toolbar上

设置菜单的事件

//下面是简单的摘子目前用的的一个例子

/**

 *顶部菜单

 */

Ext.define(‘XRS.page.bar.Top’, {

    extend: ‘Ext.toolbar.Toolbar’,

    dock: “top”,

    border: “1 0 2 0”,

    initComponent: function () {

        var me = this;

        //这里是对菜单进行解析 , 因为我从后台返回来的是 列表 , 而不是一个树 , 所以需要解析成 菜单的格式

        //参数$Admin.getMainMenu() 这个是从后台饭回来的数据的一个简单包装 , 在下面我一个样本

var mainMenu = this.parseMenu($Admin.getMainMenu());

me.items = mainMenu;

        this.callParent();

    } , 

    //解析成菜单格式的数据

    parseMenu: function (menus) {

        var me = this;

        if (!(menus  menus.length  0)) return false;

        //根据parentid生成树

        var map = {};

        var rs = [];

        Ext.each(menus, function (n) {

            n.id = “mainmenu_” + n.id;

            n.text = n.name;

            //这里是设置点击事件的 , 通过bind , 不需要设置scope

            n.handler = Ext.bind(me.onClick, me);

            //下面的只是生成一个菜单的数据格式

            map[n.id] = n;

            //如果找到父节点

            if (map[“mainmenu_” + n.parentid]) {

                var pn = map[“mainmenu_” + n.parentid];

                if (!pn.menu) {

                    pn.hideOnClick = false;

                    pn.menu = {

                        items: []

                    };

                }

                if (n.isSeparator == “1”) n.xtype = “menuseparator”;

                pn.menu.items.push(n);

            } else {

                if (n.isSeparator == “1”) n.xtype = “tbseparator”;

                rs.push(n);

            }

        }, this);

        return rs;

    },

    //这是一个点击事件

    onClick: function (menu, e) {

        if (!menu) return;

        //可以任意设置事件

        alert(menu.text);

        //this.fireEvent(‘moduleclick’, menu, ‘menu’);

    }

});

//下面是个返回的菜单数据样本 , 是个列表

        “mainMenu”: [

        {

            “$id”: “14”,

            “id”: 53,

            “name”: “基础信息”,

            “code”: “”,

            “menutype”: null,

            “module”: “”,

            “moduleConfig”: ”          “,

            “method”: ”          “,

            “isWindow”: null,

            “url”: null,

            “iconCls”: “ico_baseinfo”,

            “parentid”: 1,

            “path”: “1,53”,

            “ix”: 24,

            “privilege”: “6”,

            “isSeparator”: 0,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        },

        {

            “$id”: “35”,

            “id”: 54,

            “name”: “系统代码管理”,

            “code”: “”,

            “menutype”: null,

            “module”: “XRS.baseinfo.code.List”,

            “moduleConfig”: ”          “,

            “method”: ”          “,

            “isWindow”: null,

            “url”: null,

            “iconCls”: “ico_code”,

            “parentid”: 53,

            “path”: “1,53,54”,

            “ix”: 1,

            “privilege”: “7”,

            “isSeparator”: 0,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        },

        {

            “$id”: “36”,

            “id”: 55,

            “name”: null,

            “code”: null,

            “menutype”: null,

            “module”: null,

            “moduleConfig”: null,

            “method”: null,

            “isWindow”: null,

            “url”: null,

            “iconCls”: null,

            “parentid”: 53,

            “path”: “1,53,55”,

            “ix”: 2,

            “privilege”: “7”,

            “isSeparator”: 1,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        },

        {

            “$id”: “37”,

            “id”: 57,

            “name”: “部门机构”,

            “code”: “”,

            “menutype”: null,

            “module”: “XRS.baseinfo.organization.List”,

            “moduleConfig”: ”          “,

            “method”: ”          “,

            “isWindow”: null,

            “url”: null,

            “iconCls”: “ico_org”,

            “parentid”: 53,

            “path”: “1,53,57”,

            “ix”: 3,

            “privilege”: “8”,

            “isSeparator”: 0,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        },

        {

            “$id”: “38”,

            “id”: 58,

            “name”: “用户”,

            “code”: “”,

            “menutype”: null,

            “module”: “XRS.baseinfo.user.List”,

            “moduleConfig”: ”          “,

            “method”: ”          “,

            “isWindow”: null,

            “url”: null,

            “iconCls”: “ico_user”,

            “parentid”: 53,

            “path”: “1,53,58”,

            “ix”: 4,

            “privilege”: “9”,

            “isSeparator”: 0,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        },

        {

            “$id”: “39”,

            “id”: 59,

            “name”: “角色”,

            “code”: “”,

            “menutype”: null,

            “module”: “XRS.baseinfo.role.List”,

            “moduleConfig”: ”          “,

            “method”: ”          “,

            “isWindow”: null,

            “url”: null,

            “iconCls”: “ico_role”,

            “parentid”: 53,

            “path”: “1,53,59”,

            “ix”: 5,

            “privilege”: “10”,

            “isSeparator”: 0,

            “xtype”: null,

            “disabled”: null,

            “noprivilege”: 0

        }]

原创文章,作者:小蓝,如若转载,请注明出处:https://www.506064.com/n/238998.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小蓝的头像小蓝
上一篇 2024-12-12 12:14
下一篇 2024-12-12 12:14

相关推荐

  • QML 动态加载实践

    探讨 QML 框架下动态加载实现的方法和技巧。 一、实现动态加载的方法 QML 支持从 JavaScript 中动态指定需要加载的 QML 组件,并放置到运行时指定的位置。这种技术…

    编程 2025-04-29
  • Python简单数学计算

    本文将从多个方面介绍Python的简单数学计算,包括基础运算符、函数、库以及实际应用场景。 一、基础运算符 Python提供了基础的算术运算符,包括加(+)、减(-)、乘(*)、除…

    编程 2025-04-29
  • Python满天星代码:让编程变得更加简单

    本文将从多个方面详细阐述Python满天星代码,为大家介绍它的优点以及如何在编程中使用。无论是刚刚接触编程还是资深程序员,都能从中获得一定的收获。 一、简介 Python满天星代码…

    编程 2025-04-29
  • Python爱心代码动态

    本文将从多个方面详细阐述Python爱心代码动态,包括实现基本原理、应用场景、代码示例等。 一、实现基本原理 Python爱心代码动态使用turtle模块实现。在绘制一个心形的基础…

    编程 2025-04-29
  • Python海龟代码简单画图

    本文将介绍如何使用Python的海龟库进行简单画图,并提供相关示例代码。 一、基础用法 使用Python的海龟库,我们可以控制一个小海龟在窗口中移动,并利用它的“画笔”在窗口中绘制…

    编程 2025-04-29
  • Python樱花树代码简单

    本文将对Python樱花树代码进行详细的阐述和讲解,帮助读者更好地理解该代码的实现方法。 一、简介 樱花树是一种图形效果,它的实现方法比较简单。Python中可以通过turtle这…

    编程 2025-04-28
  • t3.js:一个全能的JavaScript动态文本替换工具

    t3.js是一个非常流行的JavaScript动态文本替换工具,它是一个轻量级库,能够很容易地实现文本内容的递增、递减、替换、切换以及其他各种操作。在本文中,我们将从多个方面探讨t…

    编程 2025-04-28
  • 使用easypoi创建多个动态表头

    本文将详细介绍如何使用easypoi创建多个动态表头,让表格更加灵活和具有可读性。 一、创建单个动态表头 easypoi是一个基于POI操作Excel的Java框架,支持通过注解的…

    编程 2025-04-28
  • Python大神作品:让编程变得更加简单

    Python作为一种高级的解释性编程语言,一直被广泛地运用于各个领域,从Web开发、游戏开发到人工智能,Python都扮演着重要的角色。Python的代码简洁明了,易于阅读和维护,…

    编程 2025-04-28
  • Python动态输入: 从基础使用到应用实例

    Python是一种高级编程语言,因其简单易学和可读性而备受欢迎。Python允许程序员通过标准输入或命令行获得用户输入,这使得Python语言无法预测或控制输入。在本文中,我们将详…

    编程 2025-04-28

发表回复

登录后才能评论