Can I use ".load" with method post?

[Xetolosch]

I have tested some ajax calls with method get, but how can I send a request with post parameters?

And where can I read some about the parameters from methods like ".load"? I don't mean the examples. I mean the syntax with maybe a short example in a overview?

[xmrcivicboix]

I have an example:



Ext.get("form_id").load({
url: "url.php",
method: 'POST',
scripts: true,
callback: callbackfunction
});


Hope that helped

[Xetolosch]

:">
That's really simple....

Thanks! I thinks that's it...
I test it now

[Xetolosch]

I have an error and don't understand it...


Ext.get("myButton") has no properties
(no name)()functions.js (line 83)
Observable()ext-all.js (line 15)
EventManager()ext-all.js (line 17)
[Break on this error] Ext.get("myButton").on('click', buttonClick);

The code:

var buttonClick = function () {
alert("test");
}

Ext.get("myButton").on('click', buttonClick);

The button:

<input type="button" id="myButton" value="Einloggen" />

Can somebody help me?

[xmrcivicboix]

That's because you don't have any event to setup those variables. For example:



<script type="text/javascript">
window.onload = function() {
Ext.get('myButton').on('click', function() { alert("hello") })
};
</script>


I would use one of the dom event of EXT instead of window.onload.

[Xetolosch]

The posted code (and more similar code) is between

Ext.onReady(function() {
and

});

[xmrcivicboix]

var buttonClick = function () {
return {
alert: function() {
alert("HELLO");
}
}
}();
Ext.get('myButton').on('click', buttonClick.alert)


OR



var buttonClick = function () {
return {
init : function() {
Ext.get('myButton').on('click', this.alert)
},

alert : function() {
alert("HELLO");
}
}
}();
Ext.onReady(buttonClick.init, buttonClick, true);


so when the dom load you add the listener to that button.

[Xetolosch]

Ok, but why this code works fine?


Ext.onReady(function() {
var paragraphClicked = function (e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();

Ext.MessageBox.show({
title: 'Test-Popup',
msg: paragraph.dom.innerHTML,
width: 400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
}

Ext.select('p').on('click', paragraphClicked);

var buttonClick = function () {
var msg = Ext.get("msg");
msg.load({
url: "http://localhost/extjs/extTest/test.html",
params: "name=hallo",
text: "Updating..."
});
msg.show();
}

Ext.get("myButton").on('click', buttonClick);
});

2 Events and both work...

[xmrcivicboix]

It works fine because you registered those event for p and the button. If you were to do this:



Ext.onReady(function() {
var paragraphClicked = function (e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();

Ext.MessageBox.show({
title: 'Test-Popup',
msg: paragraph.dom.innerHTML,
width: 400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
}

var buttonClick = function () {
var msg = Ext.get("msg");
msg.load({
url: "http://localhost/extjs/extTest/test.html",
params: "name=hallo",
text: "Updating..."
});
msg.show();
}
});
Ext.get("myButton").on('click', buttonClick);
Ext.select('p').on('click', paragraphClicked);


wouldn't work because they're not registered. Something needs to trigger it so a dom event would do the job.

[Xetolosch]

var buttonClick = function () {
return {
alert: function() {
alert("HELLO");
}
}
}();
Ext.get('myButton').on('click', buttonClick.alert)


OR



var buttonClick = function () {
return {
init : function() {
Ext.get('myButton').on('click', this.alert)
},

alert : function() {
alert("HELLO");
}
}
}();
Ext.onReady(buttonClick.init, buttonClick, true);


so when the dom load you add the listener to that button.

Your example also doesn't work. I dont know why. The same error mesage...

Can I write "normal" functions and use this functions as callbacks for events?

Sorry for my bad English.

[Xetolosch]

An jquery examle which works (from history addon):

// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// hash doesn't contain the first # character.
if(hash) {
// restore ajax loaded state
var center1 = Ext.get("center1");
center1.load({
url: hash,
//params: "name=hallo",
text: "Updating..."
});
} else {
// start page
//$("#center1").empty();
}
}

// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload);

// set onlick event for buttons
$("a[@rel='history']").click(function(){
//
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
$.historyLoad(hash);
return false;
});

How I have to write similar extjs code I don't know...