View Full Version : how do you call a function in another js file

25 Jan 2012, 7:56 AM

(I might be going about this the totally wrong way so forgive my ignorance).

I am creating a form Panel with its layout coming from another js file (lets call it sub.js).
When I click a button on the form Panel, I want call a function in sub.js. However I keep getting an error.

Ext.onReady(function () {
var item1 = [];
Ext.Object.each(getSubForm(), function (name, example) {

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
items: item1,
buttons: [{
text: 'test',
handler: function () {
item1.funcA(); // Cant call funcA()
renderTo: Ext.getBody()



function getSubForm() {

function funcA(data_array2) {
alert('funcA() called');

return {

whatever: { xtype: 'container', layout: 'vbox', id: 'vbox1', margin: '5 0 0 5',
items: [
{ xtype: 'textfield', id: 'sub1', fieldLabel: 'sub1', labelWidth: 30, width: 200, margin: '5' },
{ xtype: 'textfield', id: 'sub2', fieldLabel: 'sub2', labelWidth: 30, width: 200, margin: '5' },
{ xtype: 'textfield', id: 'sub3', fieldLabel: 'sub3', labelWidth: 30, width: 200, margin: '5' }

What I would like to do is create layouts with a few functions in their own.


25 Jan 2012, 8:45 AM
simply include the 2nd JS in your HTML file.

25 Jan 2012, 12:37 PM
yes it is included (i should have made that clear).

25 Jan 2012, 12:53 PM
What error are you getting? Most probably its because of wrong usage of "each". Each works on an array. If you reach inside the for loop, try printing the items on the console on Firebug. Then you can figure out what is causing the problem.

25 Jan 2012, 1:28 PM
the error is

Uncaught TypeError: Object [object Object] has no method 'funcA'

25 Jan 2012, 1:37 PM
oh. its because funcA is inside another function. its not accessible globally. you need to put it outside of getSubForm().

25 Jan 2012, 2:16 PM
ok but if I do that my button handler has to be

handler: function () {

instead of
handler: function () {

I think what I would like to do is have the function funcA() actually attached to the sub1.js layout object itself.


25 Jan 2012, 2:21 PM
i think i need to do a bit of reading on extending layout components


25 Jan 2012, 4:44 PM
You should also read about JavaScript as well. There are lots of great materials out there. You need to think in terms of "global", where each script is read, and executed within the global (window) scope. This might help you out.

26 Jan 2012, 1:07 AM
agreed jay. i'm new to javascript.

11 Jan 2014, 11:12 AM
Hi I have a function in main.js. i need to call another js file which one i wrote the coding for load gridpanel with calculation table.

How can i call my new js file from Main.js file.

I appriciate your help.