PDA

View Full Version : How to define Components in separate .js files?



saadkhan
3 Mar 2010, 9:28 AM
Hello,
I am making an app using ExtJs. It consist of several forms, windows, stores, and remote API calls....I gets confused during development because of the lengthiness of my only .js file. How can I separate windows, forms, stores etc defined in each .js file so that I could maintain my work easily?
I tried it doing by myself first, but I found that defining components outside Ext.onload throws errors....Please guide me?

zhegwood
3 Mar 2010, 11:27 AM
You'll basically define objects in the js file, but render them somewhere else.



//Something like this would be in one js file:

YourObj = {
getpanel: function() {
var panel = new Ext.Panel({
/*config*/
});
return panel;
}
}

//Something like this would be in another js file:

var window = new Ext.Window({
/*config*/
items: [
YourObj.getpanel()
]
});



You can also create objects by extending Ext objects & there are a few tutorials on how to do that.

VinylFox
3 Mar 2010, 12:05 PM
...I found that defining components outside Ext.onload throws errors....

You will need to remove any config options that render those components immediately, such as 'renderTo' and make a separate call to your_cmp.render() for each of those components inside the Ext.onReady block.

saadkhan
3 Mar 2010, 10:56 PM
Well, I got an idea....as I stated earlier that I have stores as well. And when I tried putting them in separate .js file, it was giving me errors og object not found etc....

Actually I was looking for a little sample for window, store and API calls just to have an idea and directly applu those techniques without any ambiguity....

rastafarra
4 Mar 2010, 12:17 AM
you should use «script» tag.

for example:


<--! forms -->

<script type="text/javascript"
src="js/app/forms/form1.js"></script>

<script type="text/javascript"
src="js/app/forms/form2.js"></script>



<--! windows -->

<script type="text/javascript"
src="js/app/windows/window.js"></script>

use «script» is like «#include» in C :)

of couse you should include your js in the correct order.

saadkhan
6 Mar 2010, 12:24 AM
You'll basically define objects in the js file, but render them somewhere else.



//Something like this would be in one js file:

YourObj = {
getpanel: function() {
var panel = new Ext.Panel({
/*config*/
});
return panel;
}
}

//Something like this would be in another js file:

var window = new Ext.Window({
/*config*/
items: [
YourObj.getpanel()
]
});



You can also create objects by extending Ext objects & there are a few tutorials on how to do that.

I have done exactly same with 'Window' as you have defined in your post. But When I posts my forms in that window or hides that very same window and show/open it again, it appears to render controls inside it very weirdly. Please see attached files....

Here is my code in separate .js file (containing all window components):



addServiceWindow = {
show : function()
{
var addServiceWindow = new Ext.Window({
title: 'Add Service',
width: 450,
minWidth: 450,
layout: 'anchor',
bodyStyle: 'padding:15px',
closeAction: 'hide',
modal: true,
items:
[
new Ext.form.FormPanel({
id: 'addServiceWindowFormPanel',
header: false,
baseCls: 'x-plain',
bodyStyle: 'padding:15px',
api:
{
submit: Autotrack.Remote.addService
},
items:
[
{
fieldLabel: 'Service Name',
name: 'addServiceWindowServiceName',
id: 'addServiceWindowServiceName',
xtype: 'textfield',
anchor: '100%'
},
new Ext.form.ComboBox({
id: 'addServiceWindowPackage',
fieldLabel: 'Package',
store : packageComboboxStore,
valueField: 'PackageId',
displayField: 'PackageName',
idProperty: 'PackageId',
typeAhead: true,
editable: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select Package...',
anchor: '100%'
})
]
})
],
bbar: new Ext.ux.StatusBar(
{
items:
[
{
text: 'Add',
handler: function()
{
var serviceName = Ext.getCmp('addServiceWindowServiceName').getValue();
var packageId = Ext.getCmp('addServiceWindowPackage').getValue();
Autotrack.Remote.addService(serviceName,packageId, function(data, trans){
if(data == true)
{
Ext.MessageBox.alert('Service Added Successfully', serviceName + ' Has Been Added To The Selected Package.');
}
else
{
Ext.MessageBox.alert('Error', serviceName + ' Could Not Be Added To The Selected Package. Samed Named Service May Exist Already.');
}
});
addServiceWindow.hide();
}
},
{
text: 'Cancel',
handler: function() {
addServiceWindow.hide();
}
}
]
})
});
addServiceWindow.show();
}
}


And I calls this window from another .js file like this


addServiceWindow.show();

marcusboos
20 Jun 2010, 6:15 AM
in my tutorial here: http://www.sencha.com/forum/showthread.php?101999-Tutorial-How-to-build-a-Ext-App.-based-on-ExtDesigner-exports-that-are-dynamicly-loa
i use a function that works like include_once() in PHP for JS