extjs-mvc結(jié)構(gòu)實踐(三):完善基本頁面2

X1nFLY 發(fā)布于2019-08-22 13:58 / 3076人閱讀

摘要：結(jié)構(gòu)實踐三完善基本頁面一般經(jīng)典的后臺管理系統(tǒng)，都是左側(cè)菜單右側(cè)結(jié)構(gòu)布局。不免俗，咱也這么實現(xiàn)定義左側(cè)導(dǎo)航菜單新建采用的組件構(gòu)建一個導(dǎo)航菜單為了顯示圖標，引入字體圖標，在引入引入定義導(dǎo)航菜單數(shù)據(jù)功能菜單展開節(jié)點。

extjs-mvc結(jié)構(gòu)實踐(三):完善基本頁面2

一般經(jīng)典的后臺管理系統(tǒng)，都是左側(cè)菜單右側(cè)tabs結(jié)構(gòu)布局。不免俗，咱也這么實現(xiàn)！

定義左側(cè)導(dǎo)航菜單

新建：app/luter/view/main/Navlist.js


/**
 * 采用extjs6的list tree組件構(gòu)建一個導(dǎo)航菜單
 */
Ext.define("luter.view.main.Navlist", {
    extend: "Ext.list.Tree",
    alias: "widget.navlist",
    width: 240,
    minWidth: 120,
    frame: true,
    border: true,
    split: true,
    expanderFirst: false,
    expanderOnly: false,
    highlightPath: true,
    itemId: "navigationTreeList",
    ui: "navigation",
    store: "NavTreeStore",
    initComponent: function () {
        this.callParent(arguments);
    }
});

為了顯示icon圖標，引入font awsome字體圖標，在app.html引入：

定義導(dǎo)航菜單數(shù)據(jù)Store:app/luter/store/NavTreeStore.js

Ext.define("luter.store.NavTreeStore", {
    extend: "Ext.data.TreeStore",
    fields: ["id", "text", "leaf", "module", "tips", "icon"],
    autoLoad: true,
    proxy: {
        type: "ajax",
        url: "app/testdata/menu.json",
        reader: {
            type: "json",
            root: "children",
            successProperty: "success"
        },

        actionMethods: {
            read: "GET"
        },
        listeners: {
            exception: function (proxy, response, operation, eOpts) {
                DealAjaxResponse(response);
            }
        }
    },
    root: {
        text: "功能菜單",
        id: 0,
        leaf: false,
        expanded: false
    },

    listeners: {
        beforeload: function (store, operation, eOpts) {
            if (store.isLoading()) return false;
        },

        nodeappend: function (me, node, index, eOpts) {
            //展開節(jié)點。
            if (!node.isRoot() && !node.get("leaf")) {
                node.set("expanded", true);
            }

        }
    }
});
/**
 * 解決問題：主要是因為RootTreeItem引起
 * ext-all.js?v=20000000:22 Uncaught TypeError: b.getFloated is not a function
 */

Ext.define("Overrides.list.RootTreeItem", {
    override: "Ext.list.RootTreeItem",
    config: {
        floated: null
    },
    setFloated: function (floated) {
        var me = this,
            el = me.element,
            placeholder = me.placeholder,
            node, wasExpanded;
        if (me.treeItemFloated !== floated) {
            if (floated) {
                placeholder = el.clone(false, true);
                placeholder.id += "-placeholder";
                me.placeholder = Ext.get(placeholder);
                me.wasExpanded = me.getExpanded();
                me.setExpanded(true);
                el.addCls(me.floatedCls);
                el.dom.parentNode.insertBefore(placeholder, el.dom);
                me.floater = me.createFloater();
            }
            else if (placeholder) {
                wasExpanded = me.wasExpanded;
                node = me.getNode();
                me.setExpanded(wasExpanded);
                if (!wasExpanded && node.isExpanded()) {
                    me.preventAnimation = true;
                    node.collapse();
                    me.preventAnimation = false;
                }
                me.floater.remove(me, false);
                el.removeCls(me.floatedCls);
                placeholder.dom.parentNode.insertBefore(el.dom, placeholder.dom);
                placeholder.destroy();
                me.floater.destroy();
                me.placeholder = me.floater = null;
            }
            me.treeItemFloated = floated;
        }
    },
    getFloated: function () {
        return this.treeItemFloated;
    },
    runAnimation: function (animation) {
        return this.itemContainer.addAnimation(animation);
    },
    stopAnimation: function (animation) {
        animation.jumpToEnd();
    },
    privates: {
        createFloater: function () {
            var me = this,
                owner = me.getOwner(),
                ownerTree = me.up("treelist"),
                floater,
                toolElement = me.getToolElement();
            me.floater = floater = new Ext.container.Container({
                cls: ownerTree.self.prototype.element.cls + " " + ownerTree.uiPrefix + ownerTree.getUi() + " " + Ext.baseCSSPrefix + "treelist-floater",
                floating: true,
                width: Ext.isIE8 ? 200 : (ownerTree.expandedWidth - toolElement.getWidth()),
                shadow: false,
                renderTo: Ext.getBody(),
                listeners: {
                    element: "el",
                    click: function (e) {
                        return owner.onClick(e);
                    }
                }
            });
            floater.add(me);
            floater.show();
            floater.el.alignTo(toolElement, "tr?");
            return floater;
        }
    }
});

寫點模擬菜單數(shù)據(jù):app/testdata/menu.json


[
  {
    "id": "111",
    "text": "系統(tǒng)管理",
    "href": null,
    "leaf": false,
    "iconCls": "fa fa-home",
    "module_id": "no sign",
    "qtip": "這個地方顯示鼠標懸停提示",
    "children": [
      {
        "id": "11111",
        "text": "用戶管理",
        "href": null,
        "leaf": true,
        "iconCls": "fa fa-user",
        "module_id": "sys.UserModule",
        "qtip": "系統(tǒng)用戶管理",
        "children": []
      },
    ]
  },
  {
    "id": "111",
    "text": "系統(tǒng)管理",
    "href": null,
    "leaf": false,
    "iconCls": "fa fa-home",
    "module_id": "no sign",
    "qtip": "這個地方顯示鼠標懸停提示",
    "children": [
      {
        "id": "11111",
        "text": "用戶管理",
        "href": null,
        "leaf": true,
        "iconCls": "fa fa-user",
        "module_id": "sys.UserModule",
        "qtip": "系統(tǒng)用戶管理",
        "children": []
      },
    ]
  }
  
]

定義中間視圖展示部分tabpanel:app/luter/view/main/ContentPanel.js

/*
 *系統(tǒng)主頁面TabPanel面板
 */
 Ext.define("luter.view.main.ContentPanel", {
    extend: "Ext.tab.Panel",
    alias: "widget.syscontentpanel",
    border: false,
    plugins: [Ext.create("luter.ux.TabCloseMenu", {//用到了一個tab右鍵關(guān)閉插件
        closeTabText: "關(guān)閉當(dāng)前頁",
        closeOthersTabsText: "關(guān)閉其他頁",
        closeAllTabsText: "關(guān)閉所有頁",
        closeIcon: +" fa fa-remove red-color",
        closeOtherIcon: " fa fa-remove red-color",
        closeAllIcon: "fa fa-remove red-color",
    })],
    items: [{
        xtype: "panel",
        id: "dashboardpanel",
        title: "DASHBOARD",
        baseCls: "home-body",
        closeable: false,
        glyph: 42
    }]

});

在viewport中引入導(dǎo)航樹和內(nèi)容區(qū)域,編輯：app/luter/view/main/Viewport.js,內(nèi)容如下：

/**
 * 主視圖占滿全屏是個viewport
 */
Ext.define("luter.view.main.ViewPort", {
    extend: "Ext.Viewport",
    alias: "widget.viewport",//別名，與xtype對應(yīng)
    layout: "border",//東南西北中布局，邊界嘛
    stores: [],
    //動態(tài)加載相關(guān)組件定義的js，相當(dāng)于java的：import com.xxx.*;
    requires: ["luter.view.main.Header", "luter.view.main.Footer", "luter.view.main.Navlist", "luter.view.main.ContentPanel"],
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [{
                region: "north",
                xtype: "appheader"
            }, {
                region: "west",
                xtype: "navlist"http://引入導(dǎo)航菜單
            }, {
                region: "center",
                xtype: "syscontentpanel"http://引入內(nèi)容tabpanel

            }, {
                region: "south",
                xtype: "sysfooter"
            }]
        });
        me.callParent(arguments);
    }
});

最后，別忘記在主控制器里加入導(dǎo)航菜單的Store，

修改主控制器:app/luter/controller/MainController.js

Ext.define("luter.controller.MainController", {
    extend: "Ext.app.Controller",
    views: ["main.ViewPort"],
    stores: ["NavTreeStore"],//引入導(dǎo)航樹的Store
    init: function (application) {
        var me = this;
        this.control({
            "viewport": {//監(jiān)聽viewport的初始化事件，可以做點其他事情在這里，如有必要，記得viewport定義里的alias么？
                "beforerender": function () {
                    console.log("viewport begin render at:" + new Date());
                },
                "afterrender": function () {
                    console.log("viewport  render finished at:" + new Date());
                },
            }
        });
    }

});

現(xiàn)在，整個項目結(jié)構(gòu)應(yīng)該如圖：

打開app.html,界面應(yīng)該如圖：

下一篇，實現(xiàn)左側(cè)菜單點擊與內(nèi)容區(qū)域tabpanel聯(lián)動功能，并且實現(xiàn)控制器的動態(tài)加載。

GPU云服務(wù)器云服務(wù)器 xhtml基本結(jié)構(gòu) 基本數(shù)據(jù)結(jié)構(gòu) html基本結(jié)構(gòu)框架基本的數(shù)據(jù)結(jié)構(gòu)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92700.html

發(fā)表評論

登陸后可評論

0條評論

X1nFLY

男|高級講師

我要關(guān)注我要私信

TA的文章

css元素不可見方法

閱讀 1474·2019-08-30 15:55
css值

閱讀 1176·2019-08-30 15:52
web前端關(guān)于瀏覽器兼容的一些知識和問題解決

閱讀 1296·2019-08-29 13:53
css3整理

閱讀 1472·2019-08-29 11:19
我的VS CODE

閱讀 2976·2019-08-26 13:29
詳解js深淺復(fù)制問題

閱讀 536·2019-08-26 11:33
react離開頁面，自定義彈框攔截，路由攔截

閱讀 2597·2019-08-23 17:20
淺探前端圖片優(yōu)化

閱讀 1028·2019-08-23 14:14

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

extjs-mvc結(jié)構(gòu)實踐(三):完善基本頁面2

相關(guān)文章