PDA

View Full Version : Include another js script



blade226
21 Mar 2012, 5:51 AM
Hi,

i have a small problem:

I want to include another js script in an script.
For example: In the first script i want to show a panel with treestore, but the content is from another.

in first script:

tab = Ext.create('Ext.panel.Panel', {
//html: nodeText + ' Content Here',
itemId: tabId,
title: nodeText,
closable:true,
items: [artikelGrid]
});
tabPanel.add(tab);
}

// set the tab as active/on-top.
tabPanel.setActiveTab(tab);
}
},
store: treeStore,
width: 200
});

second js script:

var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Menü',
id:'menueroot',
children: [{
"text": "Arbeitslosenzahlen",
"id": "menuealzahlen",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "Daten",
"id": "tabdaten",
"iconCls": "leaf",
"leaf": true,
"expanded": false

},{
"text": "Diagramm",
"id": "tabDiagramm",
"iconCls": "leaf",
"leaf": true,
"expanded": false

}]
},{
"text": "Logout",
"id": "logout",
"iconCls": "remove",
"leaf": true,
"expanded": false
}
]
}
});

How can i include the other script. I don't want to use
<script type="text/javascript" src="js/menu.js"></script>

Actually, my question is: How can I generally load external scripts on demand.

THX!

vietits
21 Mar 2012, 7:00 AM
1. Create a fake class and put in the content of js file you want to include:


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

var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Men&uuml;',
id:'menueroot',
children: [{
"text": "Arbeitslosenzahlen",
"id": "menuealzahlen",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "Daten",
"id": "tabdaten",
"iconCls": "leaf",
"leaf": true,
"expanded": false


2. User Ext.require() to dynamically load the fake class


Ext.require(['Fake']);
Ext.onReady(function(){
tab = Ext.create('Ext.panel.Panel', {
//html: nodeText + ' Content Here',
itemId: tabId,
title: nodeText,
closable:true,
items: [artikelGrid]
});
tabPanel.add(tab);
....
});

blade226
21 Mar 2012, 11:06 PM
Hello,

regarding to the Fake-Class i have a question.
How to include the class, when it is defined in an other js-file. I can't define it in the header, because the menu is dependent to some rights.

for example:
var rights == 1 then menu1
var rights == 2 then menu2

The menus are defined in the fake class and the rights came from the main script. But in the header i don't have the rights.

Or i misunderstood something?

vietits
21 Mar 2012, 11:51 PM
regarding to the Fake-Class i have a question.
How to include the class, when it is defined in an other js-file. I can't define it in the header, because the menu is dependent to some rights.

In my previous post, I've just replied for the question you mentioned in the first post: How to dynamically include a javascript file?

With my solution, the fake class is exactly the js file you want to include with an exception that it also contains Ext.define('Fake',{}) and it's named Fake.js. Of course, you can use any name instead of Fake.

To load the Fake class (which in fact is to load the js code you want), you just use Ext.require('Fake').



I can't define it in the header, because the menu is dependent to some rights.

for example:
var rights == 1 then menu1
var rights == 2 then menu2

The menus are defined in the fake class and the rights came from the main script. But in the header i don't have the rights.

It's not clear to me. Could you explain more clearly? What is the 'header'?

blade226
22 Mar 2012, 12:30 AM
I think I've explained it a little bit wrong. Next try:

in the menue.js i build a store:

if (recht1 = =1){
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Men&uuml;',
id:'menueroot',
children: [{
"text": "Arbeitslosenzahlen",
"id": "menuealzahlen",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "Daten",
"id": "tabdaten",
"iconCls": "leaf",
"leaf": true,
"expanded": false

},{
"text": "Diagramm",
"id": "tabDiagramm",
"iconCls": "leaf",
"leaf": true,
"expanded": false

}]
},{
"text": "Logout",
"id": "logout",
"iconCls": "remove",
"leaf": true,
"expanded": false
}
]
}
});
}
in the main script (index.php) i want to load the store when i need it. Not generally in the header. The path to menue.js is js/menue.js

i tried it in the main script with:

Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : 'js'
}
});

But the treestore is not definied. So i make a mistake or something is still missing

vietits
22 Mar 2012, 12:54 AM
So you want to include the js/menue.js in your main script, right? If so, let do step by step:

1. Modify your js/menue.js to include the code line Ext.define():


Ext.define('Fake.menue', {});
if (recht1 == 1){
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: 'Men&uuml;',
id:'menueroot',
children: [{
....

2. In your main script


Ext.Loader.setConfig({
enabled : true,
paths : {
Fake: 'js' // <- do not use Ext, it is for Ext framework source
}
});

// load js/menue.js
Ext.require('Fake.menue');

However, I suggest you use classes instead of just javascript code like this.

blade226
22 Mar 2012, 2:27 AM
Hi,
first thanks for your help.

I make the changes, but it doesn't work.

main script:
Ext.Loader.setConfig({
enabled : true,
paths : {
Fake: 'jsd' // path is changed
}
});
// load js/menue.js
Ext.require('Fake.menue');

menue.js:

Ext.define('Fake.menue', {});

// TreeStore with static data, for simplicity.
//Menue
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,....

in firebug i see that the menue.js is open and responds. But the treeStore is furthermore not defined.

Some idea?

blade226
22 Mar 2012, 3:27 AM
I've found something out:

-> So it doesn't work

Ext.onReady(function() {

Ext.Loader.setConfig({
enabled : true,
paths : {
Fake: 'jsd' // <- do not use Ext, it is for Ext framework source
}
});

// load js/menue.js
Ext.require('Fake.menue');

->So it works:


Ext.Loader.setConfig({
enabled : true,
paths : {
Fake: 'jsd' // <- do not use Ext, it is for Ext framework source
}
});

// load js/menue.js
Ext.require('Fake.menue');

Ext.onReady(function() {

But i want to include the menue since it is necessary.

vietits
22 Mar 2012, 4:51 AM
Then you just call Ext.require('Fake.menue') when you need. One thing to remember is that the loading is asynchronous.

blade226
22 Mar 2012, 5:26 AM
But the Problem is, when i load it after/in Ext.onReady(function() {...
the treeStore is not definied.

Load it before Ext.onReady(function() {... it works.

I don't understand it. The Loader opens the menue.js and it returns the content. But the treeStore is not yet defined.

And some other Question in the same script:

i tried to get data from a session, before Ext.onReady(function() {...



Ext.Ajax.request({
url: 'includes/getsession.php',
success: function(resp) {
var xyz = Ext.decode(resp.responseText);
console.log(xyz.recht1);
}
});

This Part works, but i want to define xyz.recht1 as a global variable. This variable must also be available in menu.js

vietits
22 Mar 2012, 6:01 AM
But the Problem is, when i load it after/in Ext.onReady(function() {...
the treeStore is not definied.


Load it before Ext.onReady(function() {... it works.


I don't understand it. The Loader opens the menue.js and it returns the content. But the treeStore is not yet defined.

It's because dynamic loading is asynchonous.

When you call Ext.require('Fake.menue') before Ext.onReady(), the Ext.onReady() only be called when the Fake.menue class has been completely loaded and you can access to treeStore.

When you call Ext.require('Fake.menue') after or in Ext.onReady() then you get undefined when accessing to treeStore. It's because you access this variable before the loading completes.

It seems that the situation becomes complicated. As I wrote in one of my post, I've just given out a way to dynamically loading a javascript file using the mechanism of dynamic loading of Ext.Loader. However, I don't encourage you doing this way. It's not a good practise. You should put all your code into classes. Also, you should not use global variables but define a class and instantiate it as singleton.

arunmatics
11 Jan 2014, 11:17 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.

Thanks,
Arun