Slow rendering

[dudo]

Hi, I'm making a form inside a dialog that shows when a button is pressed. The problem is that the form is quite big and I takes few seconds to render. Is it possible to add a wait message while form is being rendered?

[BlancoX]

maybe a loader?

in HTML add somewhere:

<div id="loading-mask" style="width:100%;height:100%;background:#c3daf9;position:absolute;z-index:20000;left:0;top:0;visibility:hidden" "> </div>
<div id="loading" style="visibility:hidden" >
<div class="loading-indicator" style="visibility:hidden"><img src="/resources/images/default/grid/loading.gif" style="width:16px;height:16px;visibility:hidden" align="absmiddle"> Cargando datos...</div>
</div>

In JS library


var myLoader = function() {
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');

return {
init : function() {
}, // fin de funcion init

// Funcion que hace que desaparezca el loader
showLoader: function() {
loading.setVisible(true);
mask.setXY([0,0]);
mask.fitToParent();
mask.setOpacity(.8);
mask.setVisible(true);
}, // fin de funcion showLoader

fadeLoader: function() {
mask.setOpacity(.8);
mask.shift({
xy:[loading.getX()-100,loading.getY()-100],
width:loading.getWidth()+200,
height:loading.getHeight()+200,
remove:false,
duration:1,
opacity:.2,
easing:'bounceOut',
callback : function(){
mask.fadeOut({duration:.1,hide:true});
loading.fadeOut({duration:.1,hide:true});
}
});
} // fin de funcion fadeLoader
}; // Fin de return
}(); // Fin de myLoader

Call myloader.showloader() BEFORE the render, and myloader.fadeloader() AFTER it's done... works fine for me, though im not in your case ^^

cheers (and im drunk! Ban Hard Rock Cafe cocktails btw ^^!!)

[dudo]

thank you, I didn't use exactly this code, but the idea helped me a lot

[Comma]

I have added this HTML somewhere on my page...


<div id="loading-mask" style="width:100%;height:100%;background:#c3daf9;position:absolute;z-index:20000;left:0;top:0;visibility:hidden" "> </div>
<div id="loading" style="visibility:hidden" >
<div class="loading-indicator" style="visibility:hidden"><img src="/resources/images/default/grid/loading.gif" style="width:16px;height:16px;visibility:hidden" align="absmiddle"> Cargando datos...</div>
</div>

...but, have an error: "loading" is null or not object. I tryed to use Ext.get("loading"); and getEl("my-div"); but the same error appears. Can anyone advice something?

[Animal]

I have added this HTML somewhere on my page...


<div id="loading-mask" style="width:100%;height:100%;background:#c3daf9;position:absolute;z-index:20000;left:0;top:0;visibility:hidden" "> </div>
<div id="loading" style="visibility:hidden" >
<div class="loading-indicator" style="visibility:hidden"><img src="/resources/images/default/grid/loading.gif" style="width:16px;height:16px;visibility:hidden" align="absmiddle"> Cargando datos...</div>
</div>

...but, have an error: "loading" is null or not object. I tryed to use Ext.get("loading"); and getEl("my-div"); but the same error appears. Can anyone advice something?

Could be just bad HTML

[Comma]

Could be just bad HTML

Animal, ty for fast reply. Data which I want to mask appears in a tab loaded w/ajax after left clicking on tree node... I made sample on single page and it works... trying to fix

And at this topic (http://extjs.com/forum/showthread.php?t=11304) the same theme... stand alone - works, when in tab - errors appears. Can I anyhow make it works in a tab?

P.S.

Here is JS & HTML of tabs


<script>
Ext.onReady(function() {
var TabsStructure = {
init : function(){
var i = 0;
var jtabs = new Ext.TabPanel('tabs_structure');

i++
jtabs.addTab('tab_structure_'+i, "Свойства страницы");
jtabs.getTab('tab_structure_'+i).getUpdateManager().setDefaultUrl("../test2.htm");
jtabs.getTab('tab_structure_'+i).getUpdateManager().loadScripts = true;
jtabs.getTab('tab_structure_'+i).on('activate', jtabs.getTab('tab_structure_'+i).getUpdateManager().refresh, jtabs.getTab('tab_structure_'+i).getUpdateManager(), true);

i++
jtabs.addTab('tab_structure_'+i, "Свойства страницы для модулей");
jtabs.getTab('tab_structure_'+i).getUpdateManager().setDefaultUrl("../test3.htm");
jtabs.getTab('tab_structure_'+i).getUpdateManager().loadScripts = true;
jtabs.getTab('tab_structure_'+i).on('activate', jtabs.getTab('tab_structure_'+i).getUpdateManager().refresh, jtabs.getTab('tab_structure_'+i).getUpdateManager(), true);

i++
jtabs.addTab('tab_structure_'+i, "Ссылки, используемые на странице");
jtabs.getTab('tab_structure_'+i).setUrl({url:'../test4.htm', scripts:true});

jtabs.activate('tab_structure_1');
}
}
Ext.EventManager.onDocumentReady(TabsStructure.init, TabsStructure, true);
});
</script>
<div id="tabs_structure" class="x-tabs-top"></div>

And here part of tree's JS


tree.on("click", function(n) {
var acturl = "[#linkmenu#]&id="+n.attributes.id;
Ext.get("main_content").load({url: acturl, scripts: true, text: "Загрузка..."});
});

P.P.S.
Maybe any one has the same trouble? I search arround the forum but I cant find something useful...