how do you call a function in another js file

[kashim]

Hi

(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) {
item1.push(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()
});


});


sub.js


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.

thanks
kashim

[Farish]

simply include the 2nd JS in your HTML file.

[kashim]

yes it is included (i should have made that clear).

[Farish]

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.

[kashim]

the error is

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

[Farish]

oh. its because funcA is inside another function. its not accessible globally. you need to put it outside of getSubForm().

[kashim]

ok but if I do that my button handler has to be

handler: function () {
funcA();
}


instead of
handler: function () {
item1.funcA();
}


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


thanks

[kashim]

i think i need to do a bit of reading on extending layout components

thanks

[jay@moduscreate.com]

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.

[kashim]

agreed jay. i'm new to javascript.