Create a matrix of textbox in extjs?

Question

I want to create a matrix, where every element of the matrix is a custom component. I don't want to use grid. Below is the sample code which i made it should give rectangular boxes all over the page, which is my requirement as well. But its throwing script error because of looping and creation of so many cell instance. and i shouldn't have extended panel here i know but i am knew to ExtJS, it worked initially so i kept it. My first question is 'Is my approach correct?' and second is 'what can i do to solve the script error because i do need all those boxes?'.

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'Excel',

launch: function() {
    Ext.define('Cell',{
           extend: 'Ext.panel.Panel',
           itemcls: 'cell',
           height: 20,
           width: 64
        });

    var port = Ext.create('Ext.container.Viewport', {
        layout: 'absolute'
    });


    var totalRowsToDraw = port.height/20;
    var totalColumnsToDraw = port.width/64;

    var cell;

    for(var r=0; r < totalRowsToDraw ;r++){
        for(var c=0; c < totalColumnsToDraw ;c++){
            cell = Ext.create('Cell');
            cell.x = c*64;
            cell.y = r*20;
            port.add(cell);
        }
    }
}

});

I just copied your code into a jsfiddle, and it does end up creating tons of Cell objects, though it does take at least 20-30 seconds to complete. — forgivenson
Yes it creating tons of cells but it is throwing script unresponsive error. It tried with firefox, and everytime i run it throws the error. However if i change the totalRowsToDraw and totalColumnsToDraw to something say 10 then its working fine. My logic is correct but i think this is not the way to do this. — Ashok
Sounds like it is just telling you the script is taking a long time to run. You need to find a way to reduce how much it is doing every iteration of the loop. What exactly are you trying to accomplish? I can tell you that a Ext.panel.Panel is a very large component, so if you tell me exactly what your are trying to make, then I can suggest a better Ext component to use. — forgivenson
I am trying to make an excel sheet viewer, so i need these many cells to render data. Is there any other way or component using which i can achieve this? — Ashok

forgivenson forgivenson · Accepted Answer · 2014-01-06T13:42:19

The 'script unresponsive' error you are seeing is simply Firefox telling you that the script has been running for longer than Firefox expects it should need to run. This could mean there is an issue with the script, and it has an infinite loop, or something. In this case, it just takes a long time to complete.

The main issue causing the script to run slowly is that each time a new Cell is added to the viewport, it redoes the layout. An easy way to solve this issue is to add all the cells at once.

var cells = [];

for(var r=0; r < totalRowsToDraw ;r++){
    for(var c=0; c < totalColumnsToDraw ;c++){
        cells.push(Ext.create('Cell', {
            x: c*64,
            y: r*20
        }));
    }
}

port.add(cells);

Just making that small change will greatly speed things up.

I would also suggest changing your Cell component to extend something like the Ext.form.field.Text textfield, since you will be loading text into each cell. You can set the readOnly flag to readOnly: true if you want this to just display the spreadsheet, without letting the viewer edit it. Good luck!

Create a matrix of textbox in extjs?

1 Answers