Results 1 to 3 of 3

Thread: What is the proper way to delete a tab, without experiencing hasOwnPropertyOfNull?

  1. #1
    Sencha User
    Join Date
    Aug 2018
    Location
    Novi Sad, Serbia
    Posts
    1
    Vote Rating
    0
      0  

    Default What is the proper way to delete a tab, without experiencing hasOwnPropertyOfNull?

    -Whenever I try to delete a tab which holds something inside, for example, ReactGridLayout with grid items I get an error: "hasOwnPropertyOfNull" with reference to ext.js:1, and when I try to delete a tab with no content inside it, then it works fine with no errors. It's like it doesn't want to delete a tab if it holds references to something else.

    -The way I delete something is:


    var component = Ext.getCmp(dashboardTabRef.getId());
    /* I have console.log-ed the component, and I get the right component that I want. */
    component.destroy(); /* I have also tried with component.remove() */
    /* Then I perform Redux actions to delete something from the database as well, and to refresh the current list of tab panels. */


    as I read, this is the proper way to delete/remove something (https://www.sencha.com/forum/showthr...troy-component).

    -This is the error that I am experiencing:



    -Is there any way to prevent this?

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

    Default

    Sorry for the delay. I am sending your question to a team member that can help you. Thanks for your patience!

  3. #3
    Sencha - Support Team
    Join Date
    Sep 2017
    Posts
    67
    Vote Rating
    -114
      -2  

    Default

    In ExtReact, it is best not to use ExtJs methods to destroy components from DOM as react does it automatically on state change.
    Use state to show/hide tabs and hidden tabs will not be rendered by react renderer.
    For eg : import React, { Component } from 'react';
    import { Container, Grid, Column, Toolbar, Button } from '@sencha/ext-modern';


    export default class RelArrayDelete extends Component {


    store = Ext.create('Ext.data.Store', {
    data: [
    { first: 'Mark', last: 'Brocato' }
    ]
    });


    state = {
    showLastName: true
    }


    toggleLastName = () => {
    this.setState({ showLastName: !this.state.showLastName });
    }


    render() {
    const { showLastName } = this.state;


    return (
    <Container layout="vbox">
    <Container>
    <div>This tests that children which are mapped to array configs can be added and removed</div>
    </Container>
    <Toolbar docked="top">
    <Button handler={this.toggleLastName} text="Toggle Last Name"/>
    </Toolbar>
    <Grid
    itemId="grid"
    flex={1}
    store={this.store}
    itemConfig={{
    viewModel: {


    }
    }}
    >
    <Column text="First" dataIndex="first"/>
    { showLastName && <Column itemId="lastName" text="Last" dataIndex="last"/>
    }
    { showLastName && <Column itemId="lastName1" text="Last" dataIndex="last"/>
    }
    </Grid>
    </Container>
    )
    }

    }
    Here, we are hiding/showing columns ..we don't need to destroy them.

    Regards,
    Joe.

Similar Threads

  1. Experiencing slideIn/slideOut flicker in IE 7
    By mystarrocks in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 8 Sep 2011, 4:12 AM
  2. [MOVED] Please Implement Delete Key to delete items in addition to Delete Menu Item
    By markjlyon in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 11 May 2010, 7:48 AM
  3. Replies: 11
    Last Post: 9 Apr 2007, 11:21 AM
  4. Experiencing problems with resizing panels and scroll bars
    By spectrumhr in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 9 Mar 2007, 1:38 AM

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
  •