Grid data does not show up

Question

I just moved from ExtJS to ExtReact. And even the simplest grid will not work. This means the data doesn't show up. Header is rendered. Data is loaded. But no error is thrown. I started with this basic Sencha-Tutorial-Code. What I describe above happended also there, so I as I said simplified everything. Problem stays the same.

    import React from 'react';
    import { WithTranslation, withTranslation } from "react-i18next";
    import {createStyles, Theme, WithStyles, withStyles} from '@material-ui/core';

    import { ExtGrid, ExtColumn } from '@sencha/ext-react-modern';
    // import './CompanyData';
    // import model from './CompanyModel';
    import Page from '../../components/Page';

    // //@ts-ignore
    // Ext.require([
    //     'Ext.grid.plugin.HeaderReorder'
    // ]);

    interface InvoicesProps extends WithTranslation, WithStyles<typeof styles> {};
    interface InvoicesState {};

    const styles = (theme: Theme) => createStyles({
    });

    class Invoices extends React.Component<InvoicesProps, InvoicesState> {

        //@ts-ignore
        store = Ext.create('Ext.data.Store', {
            // xtype: 'store',
            autoLoad: true,
            pageSize: 0,
            fields: [
                { name: 'name' },
                { name: 'price', type: 'float'},
                { name: 'priceChange', type: 'float' },
                { name: 'priceChangePct', type: 'float' }
            ],
            data: [
                {
                    "name": "Roodel",
                    "price": 59.47,
                    "priceChange": 1.23,
                    "priceChangePct": 2.11
                }, {
                    "name": "Voomm",
                    "price": 41.31,
                    "priceChange": 2.64,
                    "priceChangePct": 6.83
                }
            ],
            listeners: {
                load: function(records, operation, success) {
                    console.log("success "+success);
                    console.log(records);
                }
            }
          }
        );
        
        render() {
            const classes = this.props.classes;
            const t = this.props.t;

            return (
                <Page 
                    title={t('invoices_pageTitle')}
                    projectTitle={"Berlin Tower"}
                >
                    <ExtGrid title={t("invoices_pageTitle")} store={this.store} scrollable shadow grouped>
                        <ExtColumn text="Company" dataIndex="name" width="150"/>
                        <ExtColumn text="Price" width="85" dataIndex="price"/>
                        <ExtColumn
                            text="Change"
                            width="100"
                            dataIndex="priceChange"
                        />
                        <ExtColumn
                            text="% Change"
                            dataIndex="priceChangePct"
                        />
                    </ExtGrid>
                </Page>
            );
        }
    }

    export default withStyles(styles)(withTranslation()(Invoices));

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Hopefully I am missing something simple.

Thanks a lot. Tobias

score 0 · Answer 1 · answered Sep 07 '21 at 09:49

the answer is:

The code example doesn't work without setting the height and width of the grid. The data-part of the grid itself had height and width 0. I solved it now with the AutoSizer from react-virtualized-auto-sizer.

<AutoSizer>
                {({height, width})=>
                    <ExtGrid 
                        title={t("invoices_pageTitle")} 
                        store={this.store} 
                        scrollable 
                        shadow 
                        grouped 
                        height={height}
                        width={width}
                    >
                        <ExtColumn text="Company" dataIndex="name" width="150"/>
                        <ExtColumn text="Price" width="85" dataIndex="price"/>
                        <ExtColumn
                            text="Change"
                            width="100"
                            dataIndex="priceChange"
                        />
                        <ExtColumn
                            text="% Change"
                            dataIndex="priceChangePct"
                        />
                    </ExtGrid>
                }
            </AutoSizer>

Grid data does not show up

1 Answers1