Используйте Material-ui внутри приложения ExtReact - PullRequest
Новая
       21

Используйте Material-ui внутри приложения ExtReact

0 голосов
/ 02 июля 2019

Я пытаюсь перейти с ExtJ на React.Как оказалось, это не очень легкий процесс.Потому что мне все еще нужны некоторые компоненты ExtJs в моих приложениях.

Поэтому я решил использовать ExtReact.Но я хочу использовать как можно меньше Ext и использовать Material-ui вместо того, где я могу.

Например, я хочу иметь возможность использовать компонент Material-ui и Component ExtReact в одном приложении.

Когда я пытаюсь это сделать, я получаю эту ошибку: enter image description here

вот полный код компонента: 

import React, { Component } from 'react';
import { ExtReact,Container } from '@sencha/ext-modern';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { Grid, Column } from '@sencha/ext-modern';

Ext.require('Ext.plugin.Responsive');

export default class App extends Component {
    store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        data: [
            { name: 'Tim Smith', email: 'tim101@gmail.com' },
            { name: 'Jill Lindsey', email: 'jlindsey890@gmail.com' }
        ]
    });

    render() {
        return (
          <ExtReact>
              <AppBar position="static">
                  <Toolbar>
                      <IconButton edge="start" color="inherit" aria-label="Menu">
                          <MenuIcon />
                      </IconButton>
                      <Typography variant="h6">
                          News
                      </Typography>
                      <Button color="inherit">Login</Button>
                  </Toolbar>
              </AppBar>
            <Container html="ExtReact App Template" fullscreen>
                <Grid title="Users" store={this.store}>
                    <Column text="Name" dataIndex="name"/>
                    <Column text="Email" dataIndex="email"/>
                </Grid>
            </Container>
          </ExtReact>
        )
    }
}
...