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/zh-hant/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

發表回復

登錄後才能評論