PDA

View Full Version : Ext.MessageBox extend class?



galdaka
12 Jun 2007, 9:50 AM
Anybody extend Ext.MessageBox class for support a combobox?

Thanks in advance,

s6urik
16 Jul 2007, 1:26 PM
Check out following code, it extends progress dialog by adding second progress bar to it.



<html>
<head>
<script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript">
ProgressBox = function() {
var F = function(){};
F.prototype = Ext.MessageBox;
var o = function(){};
o.prototype = new F();
o.superclass = F.prototype;

Ext.override(o, function(){
var progress2El, pp2;
return {
getDialog : function() {
var d = o.superclass.getDialog.apply(this, arguments);
if (!progress2El) {
progress2El = Ext.fly(d.body.dom.firstChild).createChild({
tag:"div",
cls:"ext-mb-progress-wrap",
html:'<div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div>'
});

progress2El.enableDisplayMode();
var pf2 = progress2El.dom.firstChild;
pp2 = Ext.get(pf2.firstChild);
pp2.setHeight(pf2.offsetHeight);
}

return d;
},

updateProgress2 : function(value) {
pp2.setWidth(Math.floor(value * progress2El.dom.firstChild.offsetWidth));
return this;
},

show : function(options) {
options.progress = true;
o.superclass.show.call(this, options);
}
};
}());
return new o();
}();
</script>
</head>

<body>
<div id="hello-dlg"></div>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('mb6').on('click', function(){
ProgressBox.show({
title: 'Please wait...',
msg: 'Initializing...',
width:240,
closable:false,
animEl: 'mb6'
});

// this hideous block creates the bogus progress
var f = function(v1, v2){
return function(){
if(v2 == 5){
ProgressBox.hide();
}else{
ProgressBox.updateProgress(v1/2, 'Loading item ' + v1 + ' of 2...');
ProgressBox.updateProgress2(v2/4);
}
};
};
for(var i = 1; i <= 5; i++){
setTimeout(f(Math.floor(i/2), i), i*1000);
}
});
});
</script>

<p>
<b>Progress Dialog</b><br />
You can set a progress on a progress MessageBox.
<button id="mb6">Show Me</button>
</p>

</body>
</html>

sttas
17 Jul 2007, 2:09 AM
May be it`s better?


<html>
<head>
<script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript">
ProgressBox = function(){
f = function() {}
f.prototype = Ext.MessageBox;
var o = function() {}
Ext.extend(o,f, function(){
var progress2El, pp2;
return {
getDialog : function() {
var d = o.superclass.getDialog.apply(this, arguments);
if (!progress2El) {
progress2El = Ext.fly(d.body.dom.firstChild).createChild({
tag:"div",
cls:"ext-mb-progress-wrap",
html:'<div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div>'
});

progress2El.enableDisplayMode();
var pf2 = progress2El.dom.firstChild;
pp2 = Ext.get(pf2.firstChild);
pp2.setHeight(pf2.offsetHeight);
}

return d;
},

updateProgress2 : function(value) {
pp2.setWidth(Math.floor(value * progress2El.dom.firstChild.offsetWidth));
return this;
},

show : function(options) {
options.progress = true;
return o.superclass.show.call(this, options);
}
};
}());
return new o();
}();
</script>
</head>

<body>
<div id="hello-dlg"></div>
<script type="text/javascript">
Ext.onReady(function(){

var pb;
Ext.get('mb6').on('click', function(){
pb = ProgressBox.show({
title: 'Please wait...',
msg: 'Initializing...',
width:240,
closable:false,
animEl: 'mb6'
});

// this hideous block creates the bogus progress
var f = function(v1, v2){
return function(){
if(v2 == 5){
pb.hide();
}else{
pb.updateProgress(v1/2, 'Loading item ' + v1 + ' of 2...');
pb.updateProgress2(v2/4);
}
};
};
for(var i = 1; i <= 5; i++){
setTimeout(f(Math.floor(i/2), i), i*1000);
}
});
});
</script>

<p>
<b>Progress Dialog</b><br />
You can set a progress on a progress MessageBox.
<button id="mb6">Show Me</button>
</p>

</body>
</html>

s6urik
17 Jul 2007, 2:24 AM
Yep, sure! A few more lines shorter =D>