View Full Version : duplicate variable names

11 Sep 2011, 3:16 AM
On page there are included more js files:
<script type="text/javascript" src="/_app/js/MyClass1.js"></script>
<script type="text/javascript" src="/_app/js/MyClass2.js"></script>
<script type="text/javascript" src="/_app/js/MyClass3.js"></script>

On each js file there are variables with the same name:

//MyClass1.js starts with:
var store=new Ext.data.Store({});
var rdr = new Ext.data.JsonReader({})

//MyClass2.js also starts with:
var store=new Ext.data.Store({});
var rdr = new Ext.data.JsonReader({})
an so on.

How do you deal with that? Is it possible to include namespace, something like:
namespace myClass1{
var store=new Ext.data.Store({});
var rdr = new Ext.data.JsonReader({})

Or you must be careful to have all variable names in all files unique?

Is there some good article about this?

Thank you,

11 Sep 2011, 6:55 AM
Those are global variables so last one wins (each file will overwrite the last). You can wrap things in a closure:

(function() {
var store = ....,
reader = ....;

Ext.define('Something', {....});

Now the variables are global only within that closure.

12 Sep 2011, 7:15 AM
Thank you for your answer.

I can't access those variables from outside the clousure, I guess?
The last js file is the one with Ext.onReady event and inside this event I'm accessing the variables from
the js files (populating stores, rendering contents and so on..)

Do you have some simple solution?


12 Sep 2011, 7:42 AM
I would say this is not strictly an ExtJs issue, but one of general JavaScript development. While somebody could probably cut&paste some code, it's probably not going to really help you in the long run.

I would suggest that you might want to find a good JavaScript book which covers concepts related to OO development.

See these (among others) for recommendations
http://www.sencha.com/forum/showthread.php?108951-Javascript-book and also

13 Sep 2011, 6:09 AM
Ok, just this simple answer.
In first js file i define pnlMain panel:

Ext.onReady(function () {
var pnlMain = new Ext.Panel({
layout: 'border',
height: 400,
width: 1000,
renderTo: 'content',
items: [{
region: 'center'
, id: 'content-panel'
, layout: 'fit'
, frame: true
, border: false
, layout: 'card'
, activeItem: 0
, border: false


in second js file i have pnl2 in function(or in clousure) because the same name is also in some other jsfile:

var test=function(){
var pnl2 = new Ext.Panel({
id: 'panel2',
layout: 'vbox',
bodyBorder: false,
bodyStyle: 'background-color:#DFE8F6',
items: [{ xtype: 'button', text: 'test'}],
renderTo: 'content-panel'

Why this pnl2 is not rendered into content_panel or how can I do that?


13 Sep 2011, 8:14 AM
I see that the id of the center region of the panel created in Ext.onReady has the id 'content-panel', so it seems you want to "render" your other panel into that center region.

You should add it as an item rather than try to render it into an Ext panel.

13 Sep 2011, 11:46 PM
What you should do is something like this:


Ext.define('MyClass2', {
extend: 'Ext.panel.Panel',
// config

And in your main file:

Ext.onReady(function () {
var centerPanel = Ext.create('MyClass2', {
region: 'center'
var pnlMain = new Ext.Panel({
layout: 'border',
height: 400,
width: 1000,
renderTo: 'content',
items: [ centerPanel ]

There are many ways to do this. This is just to get you started with a less 'obscure' approach than yours ;)

I recommend you have another look at some of the Ext examples.

14 Sep 2011, 3:42 AM
Thanks. I agree, your approach is less obscure.
With examples there is the problem. All examples in all books about ext has the same approach - create each element with var and new keyword and that is why I'm used to it.

Other way is also to create a function which returns panel at runtime - that I think is similar as config approach - all variables inside function has local scope, so variables from different js files can have the same name.

Is it possbile to say that all variables from one js file belongs to specific namespace(like in C#)?

Something like:

namespace test{
...the content of js file

I guess not. Only way is to create all variables explicit:

and so on.

14 Sep 2011, 4:50 AM
If you are learning from an Ext3 book you might have a hard time getting started with Ext4. There are enough changes in Ext4 to make it VERY confusing for the beginner.

i recommend to either stick with Ext3 for the beginning, and come back to v4 later (starting with the tutorial on the Ext4 class system), or otherwise get yourself VERY familiar with the new Ext4 class system and migrate examples from the books to the new syntax on the fly.
But be warned: there are quite a lot of API changes as well that will often break Ext3 examples.

On your namespace issue: If you structure your application using classes, you will hardly have those namespace clashes. You will create objects inside the class constructor or inside initComponent, and not as global variables.

For instance, check out this code snippet from the FeedViewer example app:

Ext.define('FeedViewer.App', {
extend: 'Ext.container.Viewport',

initComponent: function(){

// [...]

Ext.apply(this, {
layout: 'border',
padding: 5,
items: [this.createFeedPanel(), this.createFeedInfo()]

There are many different ways of configuring a class and this can get confusing at times.

Some resources on this topic (mostly for Ext3 though):


14 Sep 2011, 5:12 AM
I'll stay with ext 3.0.
I'm not sure that mvc patteren in ext4.0 will be overall accepted - a lot more work to do.
So, I guess it is still not the time to go on ext. 4.0, I'll wait until also majority of others will start using it :)

So, namespaces are usefull only for class naming?

Thank you for your links.


14 Sep 2011, 5:13 AM
Found this here:


14 Sep 2011, 7:09 AM
Ext 4 has a lot of good stuff, but without any books on the market I consider the entry level for beginners rather high.

So, namespaces are usefull only for class naming?

I personally don't use namespaces for anything other than structuring my class hierarchy. All other information is encapsulated inside the class anyway.

I might have one or two cases where I don't create a class but the namespace directly with Ext.ns() to have a simple object or config and still not pollute the global namespace.