PDA

View Full Version : Passing arguments -- Refer Extjs In action book and ExtJs sample code



mrag74
24 Apr 2010, 9:08 PM
Hi,

I am a newbie to ExtJs. I am struck with simple hello world samples. If I pass urlName to the below code, it is giving an error:

Requirementt: I would like to pass the urlName dynamically

docBody is null
[Break on this error] scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0)+5,

<script type="text/javascript" src='helloWorld.js'></script> <!-- 4 -->

helloWorld.js
=========
function buildWindow(urlName) {
//alert(urlName);
var win = new Ext.Window({
id : 'myWindow',
title : 'My first Ext JS Window',
width : 300,
height : 150,
layout : 'fit',
autoLoad : { // 2
url : urlName,
scripts : true
}
});
win.show(); // 3
}
Ext.onReady(buildWindow("sayHi.html")); // 4


I have noticed same behavior with other sample code also. I wrote the below code after modifying
ext-3.2.0/examples/window/hello.js

Requirement: I would like to name the buttons dynamically.

function display1(name1, name2){
var win;
var button = Ext.getCmp('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,

items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),

buttons: [{
text:name1,
disabled:true
},{
text:name2,
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
}
Ext.onReady(display1("Button1", "Button2"));

Any thing wrong with the above samples.

VinylFox
28 Apr 2011, 2:11 PM
Your main problem is this...


Ext.onReady(buildWindow("sayHi.html"));

The onReady function takes a function as the argument, what your doing instead is executing the function and the reponse is being passed into onReady. This is because of the parenthesis at the end of the function name. This would be a more standard way:


Ext.onReady(buildWindow);

Notice I removed the parenthesis. Your probably wondering how you can pass your arguments now. One way is to create an anonymous function that wraps your function like so:


Ext.onReady(function(){buildWindow("sayHi.html");});

However it's quite odd to need to pass arguments within the onReady method, and most choose to do something more like this:


InitApp = function(){
buildWindow("sayHi.html");
};
Ext.onReady(InitApp);

Kinda the same, but cleaner, easier to read.