View Full Version : Results became slow after some clicks.

7 Aug 2007, 5:51 AM

I am around the forum for some minutes reading some posts and this one:
was something I think can help, if implemented in Ext 2(?)

So, I have a doubt... if someone around could light me up will be very great. My situation:

I have a page framed with a 'down' that holds the menu and a 'main' that hold the contents. I am using only the grid component and I am experience a bit of slow after clicking in the menu itens lot of times, but if I close the browser and open it again it start render the data fast again.

Is this situation 'normal'? there is something I can do to keep the speed the same as the beginning of the use?

Basicly my application request data from the database, and render the table to allow the sort and others thing offer by ExtJS, but I dunno if I am doing this on the right way... I will show some of the pages source:



<link rel="stylesheet" type="text/css" href="css/grid.css" />
<link rel="stylesheet" type="text/css" href="css/dd.css" />
<link rel="stylesheet" type="text/css" href="css/core.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/qtips.css" />
<link rel="stylesheet" type="text/css" href="css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="css/resizable.css" />

<script type="text/javascript" src="yui-utilities.js"></script>
<script type="text/javascript" src="ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>

<script type="text/javascript" src="from-markup.js"></script>



<div align="center">

<table cellspacing="0" id="the-table" width="100%">
<th width="23"></th>
<th width="38">alerta</th>
<th width="112">in

13 Aug 2007, 11:21 AM
Any info on this? : (

I am doing some test right now and i realize everytime i click to show the data i ram used is increased by 3MB. There is something I should do in the code to free up the memory?

Thanks again.

17 Aug 2007, 9:42 AM
I am really looking for some light on this... if someone has any any light on the slow thing... please let me know...

thanks a lot, again.

17 Aug 2007, 10:04 AM
without seeing any actual javascript code, theres not much we can do to help...

17 Aug 2007, 10:34 AM
Actually I am using the following code to generate the grids... I am not sure if the grid.render that I use was the best was to render more than 1 table in a page...
but the slow thing happens with 1, 2, 3 grids... and so on... so... this is now about the amount of grid in the page (at last for the first instance). This JS is the same
this example: http://extjs.com/deploy/ext/examples/grid/from-markup.html (with the grid.render thing that i changed), but even before the change, i mean, using the original
file I got slow data showing up...

* Ext JS Library 1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
* http://www.extjs.com/license

Ext.onReady(function() {
var grid = new Ext.grid.TableGrid("the-table");


Ext.onReady(function() {
var gridA = new Ext.grid.TableGrid("the-tableA");


Ext.onReady(function() {
var gridB = new Ext.grid.TableGrid("the-tableB");


Ext.onReady(function() {
var gridB = new Ext.grid.TableGrid("the-tableC");


Ext.onReady(function() {
var gridB = new Ext.grid.TableGrid("the-tableD");


* @class Ext.grid.TableGrid
* @extends Ext.grid.Grid
* A Grid which creates itself from an existing HTML table element.
* @constructor
* @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
* The table MUST have some type of size defined for the grid to fill. The container will be
* automatically set to position relative if it isn't already.
* @param {Object} config A config object that sets properties on this grid and has two additional (optional)
* properties: fields and columns which allow for customizing data fields and columns for this grid.
* @history
* 2007-03-01 Original version by Nige "Animal" White
* 2007-03-10 jvs Slightly refactored to reuse existing classes
Ext.grid.TableGrid = function(table, config) {
config = config || {};
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table);

var ct = table.insertSibling();

var fields = [], cols = [];
var headers = table.query("thead th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i;

fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'

cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true

var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)


var cm = new Ext.grid.ColumnModel(cols);

if(config.width || config.height){
ct.setSize(config.width || 'auto', config.height || 'auto');
if(config.remove !== false){

Ext.grid.TableGrid.superclass.constructor.call(this, ct,
Ext.applyIf(config, {
'ds': ds,
'cm': cm,
'sm': new Ext.grid.RowSelectionModel(),

Ext.extend(Ext.grid.TableGrid, Ext.grid.Grid);

17 Aug 2007, 12:58 PM
what action are you performing that causes the problem? (you said when you click; click what? what does it do?).

23 Aug 2007, 5:42 AM
what action are you performing that causes the problem? (you said when you click; click what? what does it do?).

Hi devnull,

When I said click, i mean... when I click in the menu option to bring the data... this situation happens:

1: I click in a menu option
2: The page bring the data unformated (without the extjs applied)
3: than the page data get some 'refresh' to render it with extjs

The slow thing is from step 2 to 3.

Thanks for the reply.