extjs-mvc結構實踐(三):完善基本頁面2

X1nFLY 發布于2019-08-22 13:58 / 3078人閱讀

摘要：結構實踐三完善基本頁面一般經典的后臺管理系統，都是左側菜單右側結構布局。不免俗，咱也這么實現定義左側導航菜單新建采用的組件構建一個導航菜單為了顯示圖標，引入字體圖標，在引入引入定義導航菜單數據功能菜單展開節點。

extjs-mvc結構實踐(三):完善基本頁面2

一般經典的后臺管理系統，都是左側菜單右側tabs結構布局。不免俗，咱也這么實現！

定義左側導航菜單

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


/**
 * 采用extjs6的list tree組件構建一個導航菜單
 */
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引入：

定義導航菜單數據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) {
            //展開節點。
            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;
        }
    }
});

寫點模擬菜單數據:app/testdata/menu.json


[
  {
    "id": "111",
    "text": "系統管理",
    "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": "系統用戶管理",
        "children": []
      },
    ]
  },
  {
    "id": "111",
    "text": "系統管理",
    "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": "系統用戶管理",
        "children": []
      },
    ]
  }
  
]

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

/*
 *系統主頁面TabPanel面板
 */
 Ext.define("luter.view.main.ContentPanel", {
    extend: "Ext.tab.Panel",
    alias: "widget.syscontentpanel",
    border: false,
    plugins: [Ext.create("luter.ux.TabCloseMenu", {//用到了一個tab右鍵關閉插件
        closeTabText: "關閉當前頁",
        closeOthersTabsText: "關閉其他頁",
        closeAllTabsText: "關閉所有頁",
        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中引入導航樹和內容區域,編輯：app/luter/view/main/Viewport.js,內容如下：

/**
 * 主視圖占滿全屏是個viewport
 */
Ext.define("luter.view.main.ViewPort", {
    extend: "Ext.Viewport",
    alias: "widget.viewport",//別名，與xtype對應
    layout: "border",//東南西北中布局，邊界嘛
    stores: [],
    //動態加載相關組件定義的js，相當于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://引入導航菜單
            }, {
                region: "center",
                xtype: "syscontentpanel"http://引入內容tabpanel

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

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

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

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

});

現在，整個項目結構應該如圖：

打開app.html,界面應該如圖：

下一篇，實現左側菜單點擊與內容區域tabpanel聯動功能，并且實現控制器的動態加載。

GPU云服務器云服務器 xhtml基本結構基本數據結構 html基本結構框架基本的數據結構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92700.html

extjs-mvc結構實踐(三):完善基本頁面

摘要：上篇實現了基本的代碼架構，控制器動態加載功能以及一個基礎的頁面布局，本節開始，將陸續完善這個頁面。頁面底部區域，主要顯示版權信息等，也可以顯示個時間啥的。。。頭部和底部定義完畢后，需要在中引入對應位置。上篇實現了基本的代碼架構，控制器動態加載功能以及一個基礎的頁面布局，本節開始，將陸續完善這個頁面。目標如前所述，我們的頁面包含這么幾個區域： header: UI頂部區域，顯示系...

zhkai 2019-08-22 13:57 評論0 收藏0
extjs-mvc結構實踐(二):基本頁面

摘要：接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。目標全屏顯示左側導航菜單，右側標簽頁切換操作內容區域。一般模型與你后臺返回的數據結構一一對應。給其他組件提供一致接口使用數據。整個構成一個所謂的。接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。書接上回，開始寫UI效果。目標全屏顯示、左側導航菜單，右側標簽頁切換操作內容區域。包含header和foo...

changfeng1050 2019-08-22 13:57 評論0 收藏0
extjs-mvc結構實踐(一):搭建基礎架構

摘要：今天開始，一點點記錄一下使用搭建一個基礎結構的過程。沒辦法，記性差這種結構的前端，主要是面向后臺信息管理系統，可以最大限度的規范前端代碼結構和數據結構。今天開始，一點點記錄一下使用extjs6.2.0搭建一個基礎MVC結構的過程。沒辦法，記性差:)這種結構的UI前端，主要是面向后臺信息管理系統，可以最大限度的規范前端代碼結構和數據結構。做網站或者手機端，這種方式全引入了extjs,...

kamushin233 2019-08-22 13:57 評論0 收藏0
extjs-mvc結構實踐(四):導航菜單與控制器模塊聯動

摘要：根據模塊創建模塊失敗。在中，我們配置了標明了這是一個控制器模塊，點擊后會去觸發控制器加載動作。正常情況下同一個模塊的只加載一次。前面幾篇文檔，我們基本實現了一個靜態的extjs頁面，本篇開始，實現左側導航樹與右側內容的聯動，也就是點擊導航菜單，加載對應模塊頁面和業務邏輯，實現js文件的按需加載。業務需求是這樣的：左側的treelist，當點擊某個節點的時候，系統根據tree數據里...

figofuture 2019-08-22 13:58 評論0 收藏0
extjs-mvc結構實踐(五):實現用戶管理的增刪改查

摘要：而且上一篇文章中，也已經實現了一個基本的用戶管理列表頁面。接著上一篇，完善用戶管理，實現增刪改。為了用戶體驗，增加和修改用戶信息的表單，都放在彈窗中進行。經過前面幾篇文章的介紹，一個基本的MVC結構應該是具備了。而且上一篇文章中，也已經實現了一個基本的用戶管理列表頁面。接著上一篇，完善用戶管理，實現增刪改。為了用戶體驗，增加和修改用戶信息的表單，都放在彈窗中進行。避免跳轉頁面。定義...

wendux 2019-08-22 13:58 評論0 收藏0