CODEWITHSUNDEEP
sapui5
Ajay
Ajay

Reputation: 105

TypeError Controller.extend is not a function

When running my project, I am getting:

Error: failed to load 'stock/controller/plant.controller.js' from ./controller/plant.controller.js: TypeError: Controller.extend is not a function

Please, let me know how to fix it.

plant.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "jquery.sap.global",
    "stock/Formatter",
    "sap/ui/core/routing/History",
    "sap/ui/model/json/JSONModel"
], function (jQuery, Formatter, Controller, History, JSONModel) {
    "use strict";

    var TableController =  Controller.extend("stock.controller.plant", {
        onInit: function () {
            var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
            this.getView().setModel(oModel);
        },

        getRouter : function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },

        onNavBack: function (oEvent) {
            var oHistory = History.getInstance();
            var sPreviousHash = oHistory.getPreviousHash();
            if (sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("input", {}, true /*no history*/);
            }
        }
    });
    return TableController;
});

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/core/mvc/XMLView",
    "sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel, XMLView) {
    "use strict";

    var Component = UIComponent.extend("stock.Component", {
        metadata: {
            manifest: "json",
            getTable: function () {
                return this._rootView.getContent()[0];
            }
        },
        publicMethods: [
            "getTable"
        ],
        dependencies: {
            libs: [
                "sap.m",
                "sap.ui.layout"
            ]
        },
        rootView: "stock.view.input",
        config: {
            sample: {
                files: [
                    "view.input.view.xml",
                    "controller.main.controller.js",
                    "Formatter.js"
                ],
                description : "In this example assisted input is provided with table-like suggestions where several columns can display more details."
            }
        },

        init : function () {
            UIComponent.prototype.init.apply(this, arguments);
            this.getRouter().initialize();
        }
    });

    Component.prototype.createContent = function () {
        this._rootView = sap.ui.xmlview({ viewName : "stock.view.plant" });
        return this._rootView;
    };

    return Component;
});

Upvotes: 1

Views: 2158

Answers (1)

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

You overlooked the sequence of the files declaration. In your example you use a "stock/Formatter" file as a "Controller", which is obviously wrong. Below is a correct sequence:

sap.ui.define([
        'sap/ui/core/mvc/Controller',
        'jquery.sap.global',
        'stock/Formatter',
        'sap/ui/core/routing/History',
        'sap/ui/model/json/JSONModel'
    ], function (Controller, jQuery, Formatter, History,JSONModel) {
});

Upvotes: 1

Related Questions