getting error on page load : Ext Undefined

Question

0.00/5 (No votes)

See more:

i have included .js file in my project
which include code for message box
but on load i'm getting this error
Ext is undefined
please help...

............ JS File code...........................

JavaScript

Ext.require([
'Ext.window.MessageBox',
'Ext.tip.*'
]);


Ext.onReady(function () {
    Ext.get('mb1').on('click', function (e) {
        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
    });

    Ext.get('mb2').on('click', function (e) {
        Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
    });

    Ext.get('mb3').on('click', function (e) {
        Ext.MessageBox.show({
            title: 'Address',
            msg: 'Please enter your address:',
            width: 300,
            buttons: Ext.MessageBox.OKCANCEL,
            multiline: true,
            fn: showResultText,
            animateTarget: 'mb3'
        });
    });

    Ext.get('mb4').on('click', function (e) {
        Ext.MessageBox.show({
            title: 'Save Changes?',
            msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
            buttons: Ext.MessageBox.YESNOCANCEL,
            fn: showResult,
            animateTarget: 'mb4',
            icon: Ext.MessageBox.QUESTION
        });
    });

    Ext.get('mb6').on('click', function () {
        Ext.MessageBox.show({
            title: 'Please wait',
            msg: 'Loading items...',
            progressText: 'Initializing...',
            width: 300,
            progress: true,
            closable: false,
            animateTarget: 'mb6'
        });

        // this hideous block creates the bogus progress
        var f = function (v) {
            return function () {
                if (v == 12) {
                    Ext.MessageBox.hide();
                    Ext.example.msg('Done', 'Your fake items were loaded!');
                } else {
                    var i = v / 11;
                    Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% completed');
                }
            };
        };
        for (var i = 1; i < 13; i++) {
            setTimeout(f(i), i * 500);
        }
    });

    Ext.get('mb7').on('click', function () {
        Ext.MessageBox.show({
            msg: 'Saving your data, please wait...',
            progressText: 'Saving...',
            width: 300,
            wait: true,
            waitConfig: { interval: 200 },
            icon: 'ext-mb-download', //custom class in msg-box.html
            animateTarget: 'mb7'
        });
        setTimeout(function () {
            //This simulates a long-running operation like a database save or XHR call.
            //In real code, this would be in a callback function.
            Ext.MessageBox.hide();
            Ext.example.msg('Done', 'Your fake data was saved!');
        }, 8000);
    });

    Ext.get('mb8').on('click', function () {
        Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
    });

    //Add these values dynamically so they aren't hard-coded in the html
    Ext.fly('info').dom.value = Ext.MessageBox.INFO;
    Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
    Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
    Ext.fly('error').dom.value = Ext.MessageBox.ERROR;

    Ext.get('mb9').on('click', function () {
        Ext.MessageBox.show({
            title: 'Icon Support',
            msg: 'Here is a message with an icon!',
            buttons: Ext.MessageBox.OK,
            animateTarget: 'mb9',
            fn: showResult,
            icon: Ext.get('icons').dom.value
        });
    });

    function showResult(btn) {
        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
    };

    function showResultText(btn, text) {
        Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
    };
});

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MessageBox.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/JavaScript1.js"></script>

</head>
<body onload="javascript:return onload()">
    <form id="form1" runat="server">
        <div>
            <asp:Button runat="server" ID="mb1" Text="Check" />
        </div>
    </form>
</body>
</html>

Posted 6-Sep-13 2:57am

kedar001

Updated 8-Sep-13 22:03pm

v7

Add a Solution

5 solutions

Solution 1

Find out the refrence for the JS file is included in the HTML page.
If you have not included then add like this

XML

You must include the reference like this in your HTML Page.
<script type="text/javascript" language="javascript" src="ApplicationPath/Script/JS.js"></script>

Posted 6-Sep-13 3:10am

Thomas ktg

Comments

kedar001 6-Sep-13 23:43pm

i have included this path but getting same error..

Solution 3

Check this.

http://stackoverflow.com/questions/9242876/extjs-want-to-call-some-code-after-ext-onready-function[^]

Posted 6-Sep-13 3:15am

Jaydeep Jadav

Solution 4

If its related to JS file not been able to be found at the correct location after the webserver maps the location, you can use ResolveURl(location_of_js_from_app_root) within server side <% %> tags. This will resolve the script's correct location as per the runtime location of the page.

Else there can be other required files to be included but they are not present in your implemented solution.

There will not be any error within the pluggin JS file unless there are manual modificatons

Posted 7-Sep-13 22:51pm

Nitin Singh India

Comments

kedar001 8-Sep-13 11:24am

Location of the File is correct.
i have added one function in .js file.(simple alert("my function"))
i'm getting that functions in my website.
i called that functions on load
if i continue with the error (which i'm getting for Ext.requre(['Ext.window.MessageBox','Ext.tip.*']);)
then i'm getting my alert "My function"

Nitin Singh India 8-Sep-13 12:07pm

Try creating a sample page within the application and include the scripts entirely same with keeping the app specific code to a minimum.
In such scenarios, there are very small items which get missed causing a big confusion. And if you are in context of big application, then several factors come into the environment so its difficult to pinpoint.

Creating a new sample page should be the best way to pinpoint the root cause.
If you do this and still face the issue, you can post the sample page code out here so people can debug it more easily

kedar001 9-Sep-13 3:44am

i have updated my code
Please find .js file and .aspx code

Solution 2

There may be some syntax error in the js file you have included, check the function which returns Ext.

Posted 6-Sep-13 3:10am

Gitanjali Singh

Comments

kedar001 6-Sep-13 23:44pm

.js file dont have any syntax error ..

you can find js file bellow..
http://stackoverflow.com/questions/9242876/extjs-want-to-call-some-code-after-ext-onready-function

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nitin Singh India · Accepted Answer · 2013-09-09T02:45:00

Solution 5

You haven't included the pluggin's own JS file in the page. Hence the DOM is not able to recognize anything associated with the pluggin.
In the page's head, before you include your custom script file, include the extjs.js file along with the the jquery file and you will be good to go

Posted 9-Sep-13 2:45am

Nitin Singh India

Comments

kedar001 12-Sep-13 2:41am

thanks... :)