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

    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,006
    Answers
    5

    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

    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
  •