javascript - español - ¿Cómo obtener la funcionalidad Row Headers en ExtJs?

extjs 6 tutorial español

Question

Quiero renderizar algo como se muestra a continuación:

+-----------------+------------+---------------+
| | Column 1 | Column 2 |
+------------------------------+---------------+
| Row Header 1 | ... | |
+------------------------------+---------------+
| Row Header 2 | | |
+------------------------------+---------------+
| Row Header 3 | | |
+----------------------------------------------+

Entiendo la forma de lograr los encabezados de las columnas, también hay mucha documentación disponible. por ejemplo, http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

Pero no pude obtener el que tiene Row Headers. ¿Cómo lo logro y presento los datos correspondientes a los atributos de fila y columna, por ejemplo, desde el archivo Jason?

Answer 1

Entonces, su grilla tendría tres columnas:

columns:[{
dataIndex:''rowHeader''
},{
text:''Column 1'',
dataIndex:''column1''
},{
text:''Column 2'',
dataIndex:''column2''
}]

y cargar los datos de una tienda con los fields:[''rowHeader'',''column1'',''column2''] modelo fields:[''rowHeader'',''column1'',''column2'']

que, si es una tienda JSON, esperaría que el servidor le envíe los datos en el formato

{success:true,data:[
{rowHeader:''RowHeader 1'',column1:'''',column2:''''},
{rowHeader:''RowHeader 2'',column1:'''',column2:''''},
{rowHeader:''RowHeader 3'',column1:'''',column2:''''}
]}

Si desea visualizar datos que vienen en formatos diferentes a ese, por ejemplo, el formato que se usa a menudo para las matrices dispersas:

{rowHeader:''RowHeader 1'',columnHeader:''ColumnHeader 1'',value:''''},
{rowHeader:''RowHeader 2'',columnHeader:''ColumnHeader 1'',value:''''},
{rowHeader:''RowHeader 3'',columnHeader:''ColumnHeader 1'',value:''''},
{rowHeader:''RowHeader 1'',columnHeader:''ColumnHeader 2'',value:''''},
{rowHeader:''RowHeader 2'',columnHeader:''ColumnHeader 2'',value:''''},
{rowHeader:''RowHeader 3'',columnHeader:''ColumnHeader 2'',value:''''},
{rowHeader:''RowHeader 1'',columnHeader:''ColumnHeader 3'',value:''''},
{rowHeader:''RowHeader 2'',columnHeader:''ColumnHeader 3'',value:''''},
{rowHeader:''RowHeader 3'',columnHeader:''ColumnHeader 3'',value:''''}

tendrá que transformar manualmente los datos en el formato mencionado, porque la cuadrícula ExtJS simplemente no puede procesar ningún formato que no tenga un registro por fila.

Si desea saber cómo hacer que las celdas RowHeader se vean como encabezados:

Básicamente, se trata de definir un tdCls, y posiblemente también un renderizador, en la columna. Es posible que desee echar un vistazo a los documentos de API en http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-tdCls y en http: // docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

Luego, está la guía How To Style ExtJS Grid Cells en http://skirtlesden.com/articles/styling-extjs-grid-cells

Answer 2

Si no tiene una estructura JSON fija, tendrá que enviar un esquema. Yo recomendaría usar un formato json que esté listo para comer para grid.reconfigure .

{"schema":[{dataIndex:''t1'',name:''T1''}],"data":[{t1:''Val''},{t1:''Valo''}]}

Ahora no cargaría esto en una tienda directamente, sino que usaría Ext.Ajax.request , luego prepararía la tienda (simplemente cree una nueva con los campos del esquema) y la grilla ( grid.reconfigure(columns,store) ), antes de poner los datos en la tienda usando store.loadRawData .