PDA

View Full Version : Menu Example - Stop showing off Jack!



JohnT
23 Feb 2007, 3:08 PM
hee hee..

Ok, studying those awesome Quick Tips in the menu example.

Couple questions:

In the following code, I assume this is a helper object to the QuickTips. So you first create a function called creatBox which takes in the title and string, right? That then returns the HTML? (these are real questions)...

I think I got the first part.

First part of the code...


Ext.example = function(){
var msgCt;

function createBox(t, s){
return ['<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
}

}();


But in the second part...



.
.
.
return {
msg : function(title, format){
if(!msgCt){
msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
}
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});
}
};




It appears you are creating a shortcut for us? And again, passing the title and string.

Then it seems you check to see if you already created a message?




if(!msgCt){
msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
}



And the next three lines is where you lose me.




var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});



What are you doing here?

Thanks!

kjordan
23 Feb 2007, 8:46 PM
He formats the string to show in the box. He appends the box to the message container. And then he animates the message with a chain of things. It slides in, then pauses for a second, then ghosts out.

bamboocha
17 Jul 2007, 4:19 AM
I'm new with extjs :) ...so how do i increase the pause..it doesn't work if i call pause() with a greater value.

haibijon
17 Jul 2007, 3:54 PM
@bamboocha

Check out the docs: Ext.Fx.pause (http://extjs.com/deploy/ext/docs/output/Ext.Fx.html#pause)

Increasing the value should increase the timespan of the pause. If it doesn't, you might want to try clearing your browser cache.

brian.moeskau
17 Jul 2007, 10:15 PM
It should work as advertised. To test, you can open examples\examples.js and edit the pause in the msg() function, then open the MessageBox example page and try it out. It should pause as expected.

gotcha
2 Apr 2008, 6:41 AM
How do we change the location of the tip box. Right now, it is top center. How do I make it animate at bottom right?