typescript - 网格数据不显示

Question

我刚从 ExtJS 搬到 ExtReact。即使是最简单的网格也行不通。这意味着数据不显示。标题已呈现。数据已加载。但不会抛出任何错误。我从这个基本的 Sencha-Tutorial-Code开始。我上面描述的也发生在那里，所以正如我所说的，我简化了一切。问题保持不变。

    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>

希望我错过了一些简单的东西。

非常感谢。托拜厄斯

标签： typescriptextreact

Answer 1

答案是：

如果不设置网格的高度和宽度，代码示例将无法工作。网格本身的数据部分的高度和宽度为 0。我现在使用 react-virtualized-auto-sizer 中的 AutoSizer 解决了它。

<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>