Results 1 to 3 of 3

Thread: Use material-ui components into ExtRact app

  1. #1
    Sencha User
    Join Date
    Jun 2019
    Posts
    1
    Vote Rating
    0
      0  

    Default Use material-ui components into ExtRact app

    I am trying to migrate from ExtJs to react. As it turned out it is not a very easy process because of the rich components of ExtJs.
    So I decided to use ExtReact with material UI. But what I want to do is to use mainly Material-ui components (https://material-ui.com/) and use Ext components when I really need them.

    Is it possible to install "@material-ui/core" into my ExtReact application and then use components like <AppBar /> along with the Ext components like <Grid />

    When I am trying to do this, I get this error:
    Code:
    Uncaught TypeError: schedulePassiveEffects is not a function

    here is the complete component:
    Code:
    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: '[email protected]' },
                { name: 'Jill Lindsey', email: '[email protected]' }
            ]
        });
    
    
        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>
            )
        }
    }

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005
    Answers
    5
    Vote Rating
    -523
      0  

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff and someone will get back to provide assistance as soon as possible. Your patience is greatly appreciated!

    Kind Regards,

    Michele


  3. #3
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    476
    Answers
    6
    Vote Rating
    -336
      0  

    Default

    Hello,

    This has been reported to an Architect for review and will keep you posted as soon as there is an update.

    Regards,
    Kumar
    Sencha Support.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •