The Define feature in EXT JS is unable to access functions from other .js files

vehicle.js

var  BtnEdit = Ext.getCmp('BtnEdit');
    BtnEdit.on('click', function(){ 
        var grid = Ext.getCmp('mygridpanel')
        if (grid.getSelectionModel().hasSelection()) {
           var row = grid.getSelectionModel().getSelection()[0];
           console.log(row.get('Plat_No'));
        };

        var win = Ext.create('MyApp.view.Edit2');
        win.show();
    });

design.js

//==========Update Vehicle==================
    Ext.define('MyApp.view.Edit2', {
    extend: 'Ext.window.Window',

    height:187,
    id:'ChangePasswordWin',
    width:500,
    title:'Edit',

    initComponent:function()
        {var me=this;

        Ext.applyIf(me,
            {
            items:[{
                    xtype:'container',
                    height:180,
                    width:505,
                    layout:{align:'center',type:'hbox'},
                    items:[{
                            xtype:'container',
                            flex:1,
                            margins:'',
                            height:140,
                            padding:'10 10 10 10',
                            width:385,
                            layout:{type:'vbox'},
                            items:[{
                                    xtype:'form',
                                    flex:1,
                                    margins:'10 10 10 10',
                                    height:137,
                                    width:345,
                                    bodyPadding:10,
                                    header:false,
                                    title:'My Form',
                                    items:[{
                                            xtype:'textfield',
                                            disabled:true,
                                            padding:'0 0 10 0',
                                            width:310,
                                            fieldLabel:'Vehicle ID',
                                            labelWidth:150
                                        },{
                                            xtype:'textfield',
                                            padding:'0 0 10 0',
                                            width:310,
                                            fieldLabel:'Plat Number',
                                            labelWidth:150
                                    }]
                                }
                            ]
                        }]
                }],
                dockedItems:[{
                        xtype:'toolbar',
                        dock:'top',
                        items:[{
                                xtype:'button',
                                cls:'',
                                width:53,
                                icon:'',
                                iconCls:'save',
                                text:'Save'
                            }]
                    }
                ]
            });

        me.callParent(arguments);
    }

});

index.html

<script type="text/javascript" src="vehicle.js"></script>
<script type="text/javascript" src="../resources/js/design.js"></script>

this is the firebug log

GET http://localhost/BusTicket/vehicle/MyApp/view/Edit2.js?_dc=1386481666308

404 Object Not Found
        0ms 
ext-all.js (line 27)
TypeError: c is not a constructor


...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p:k...

why am I encountering this issue?

Answer №1

Here are some recommendations:

1. Make sure to name your file the same as your class.

2. In your app.js (or equivalent), include your view file in the array declaration like so:

Ext.application({
    ...
    models: ['Station', 'Song'],
    stores: ['Stations', 'RecentSongs', 'SearchResults'], 
    views: ['Edit2']
    ...
});

You can also require it by adding these lines:

requires: [
        'MyApp.view.Edit2',
        'Panda.view.NewStation',
        'Panda.view.SongControls',
        'Panda.view.StationsList',
        'Panda.view.RecentlyPlayedScroller',
        'Panda.view.SongInfo'
    ],

For more information, check out this link: http://docs.sencha.com/extjs/4.2.1/#!/guide/mvc_pt2

Best Regards.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery Validation for Radio Buttons and Optional Fields

I've been pondering over this issue for a couple of hours now. Currently, my focus is on validating a form using a jQuery plugin. Here's the link to the documentation: http://docs.jquery.com/Plugins/Validation Here's the code I have so fa ...

Execute JS function when navigating back in history

I recently came across an article on browser bfcache in Stack Overflow. I decided to test it out on Safari Version 7.0.5 (9537.77.4) and noticed that when I click the back button in history, the JavaScript does not execute. How can I ensure that my JavaS ...

Error: Unable to access the 'searchField' property because it is null

An error occurred: Cannot find the searchField property of null in App.render https://i.sstatic.net/ZYp3L.png ...

Ways to customize the default countdown timer

I came across this amazing project at https://codepen.io/mattlitzinger/pen/ysowF. While the project is wonderful, I am looking to make some modifications to the code, specifically targeting a specific date. Here is the JavaScript code snippet: var tar ...

Continuous execution of JQuery function despite modification of attribute

I am having an issue with my menu on the page. When I click on each menu item, it triggers one of the functions below: $('.sideNav1').click(function(){ $('.sideNav1').attr('class','selected1'); $('.sele ...

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

Guide on generating a dynamic div element with v-for in Vue.js

I am looking to generate div elements dynamically based on the number of items in an array. These divs will include a ProgressBar.js HTML element. Here is the Vue.js code snippet for reference: import ProgressBar from 'progressbar.js' var bar ...

Manipulating HTML elements while inside an SVG tag: a comprehensive guide

Having limited experience with .svg files and tags, I'm trying to achieve something simple but have been unable to find the exact solution after spending hours searching online. Can anyone provide some assistance? I have a basic svg file with an imag ...

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

I am having trouble retrieving the properties of "2d" objects using tiles[i-1], unlike standard objects in JavaScript

I've been working on constructing a random map generator by utilizing a grid composed of tiles within a canvas. In my process, I'm investigating the properties of each tile tiles[i] before handling tiles[i-1]. While this procedure seems to functi ...

Confirm that a collection is empty using node.js

const http = require('http'); const url = require('url'); const route = require('router')(); ... route.get('/{betNameType}', function(req, res) { const query = url.parse(req.url, true).query; if (!Object.keys ...

Creating a striking sphere in Three.js: a step-by-step guide

Is it possible to create a white sphere using THREE.SphereGeometry that is visible on a dark green surface and against a white scene background in Three.js? Are there any techniques for outlining objects dynamically in this framework? Using version three. ...

Sort elements based on the chosen option in the select component

Here's a link to my app on Codesandbox https://codesandbox.io/s/filter-search-gxidc?file=/src/App.js which consists of only one component, app.js Within data.js, I have an array of objects: export const data = [ { currencies: [{ code: "AFN ...

Perform an Ajax POST request to a specific URL and then automatically redirect to that same

I am currently in the process of developing a web application that allows users to create markers on a Leaflet map. The marker details are then saved in a Django backend system. My objective is to direct the user to a detailed page where they can input mar ...

`When using indexOf to search a JSON object, the result may return as

Within my messages.json file, I have JSON objects storing chat messages. An example snippet is shown below: [ { "sender": "Alice", "text": "Hello there" }, { "sender": "John", "text": "How's it going?" } ] I am trying to locat ...

There seems to be an issue with the post request to a PHP file as it is returning a null value when

I have been struggling with this issue for a while now and can't seem to understand why I keep getting null after calling my $.ajax function. I pass an associative array containing the method name, then invoke the method in PHP to return a JSON string ...

Implementing AngularJS table filters on user click

As a newcomer to angularjs, I am attempting to implement a filter on click. The user will select a source and destination, then click on the filter button. The table should display results based on the input. Upon page load, the table should already contai ...

Issue with webpack failing to inject variables

I have encountered an issue while using the npm package got, which I am importing into one of my components. Strangely, when I run everything through Webpack, Safari is the only browser showing the error message: SyntaxError: Unexpected keyword 'cons ...

Custom tooltip in Chart JS is not displaying as expected

I have created a line graph and I am looking to customize its tooltip. When hovering over the graph, I want it to display the following information: Question: This is question 1 Your answers: 3 Average answers: 7 Your average: 5 Average: 7 The data in th ...

Steps for establishing a one-to-many relationship in my comment database table

I've inserted the following code into my articles migration: Schema::create('articles', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('user_id'); $table->foreign('user_id')- ...