Anybody extend Ext.MessageBox class for support a combobox?
Thanks in advance,
Ext.MessageBox extend class?
Anybody extend Ext.MessageBox class for support a combobox?
Thanks in advance,
Check out following code, it extends progress dialog by adding second progress bar to it.
Code:<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>
Ext.MessageBox extend class
May be it`s better?
PHP Code:<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>
Yep, sure! A few more lines shorter
----
www.devhands.com
Posting Permissions
Reply With Quote