View Full Version : How to build a scrollable matrix with ExtJS?

7 Jun 2009, 1:06 AM

I must write a scrollable matrix with ExtJS, but I don't know which components I should use to obtain my wished resutls (if exists....)
Can sameone help me please?

I need to display into a form (with other fields of course), an UI Component like the attached screenshot.

It is a grid with "n" columns and "m" rows.
Each cell can be void or contains from 1 to n fields: some editables, some others readonly and same others only as a label (DisplayField according ExtJS)
All not empty cell will contains the same number of fields.

Because you can have an huge number or row and column, I need to active a horizontal and vertical scrolling.

Of course if the user scroll vertically, the first Row (header) must be fixed,
instead if the user scroll horizontally, the first Columns (label of columns) must be fixed.

From an application point of view, think about a Sales Order in the fashion enviroment where you must enter an order for a product for Sizes (Column) and Colors (Row).

I was thinking to use a EditorGridPanel, but I don't think I m able to fill a single cell with more fields.
I don't know very well all available ExtJS UI component....
An help is very aprpeciate


11 Jun 2009, 6:53 AM
None of you know how can be replicated this behaviour with ExtJS?
Of couse I believe I should extends the EditorGridPanel
Maybe to build a custom renderer in order to build "n" fields in the same cell..
But no idea about scrolling..


11 Jun 2009, 2:44 PM
Since Rows and Columns are switched, you will need to implement your own gridview. Something like a "FlippedGridView". In this Class you will need to overwrite all methods related to layouting. To do so you will need to know how the EditorGrid is Built.
I suggest to take a deeper Look into the following Ext-Sources:

GridView (http://extjs.com/deploy/ext-3.0-rc1.1/docs/source/GridView.html#cls-Ext.grid.GridView)
GridPanel (http://extjs.com/deploy/ext-3.0-rc1.1/docs/source/GridPanel.html#cls-Ext.grid.GridPanel)
EditorGridPanel (http://extjs.com/deploy/ext-3.0-rc1.1/docs/source/EditorGrid.html#cls-Ext.grid.EditorGridPanel)

Furthermore you should know about the component lifecyrcle:

Creating new UI controls using ExtJs (http://extjs.com/learn/Tutorial:Creating_new_UI_controls)

Another helpfull Source is:
Extending Ext Components (http://extjs.com/learn/Manual:Component:Extending_Ext_Components)

Try to search in the forum for lockedGrid as well.

regards Martin

20 Aug 2009, 11:59 AM
robertoroberto (http://extjs.com/forum/member.php?u=73861) how with Your matrix?
I need to build a matrix/cube too ;/

21 Aug 2009, 2:20 AM
I create it using HTML and JS starting from here http://www.webtoolkit.info/scrollable-html-table.html
I have no idea how to build a cube.... a 3D table.....i'm curious about it...