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
    Novi Sad, Serbia

    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 (

    -This is the error that I am experiencing:

    -Is there any way to prevent this?

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017


    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


    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('', {
    data: [
    { first: 'Mark', last: 'Brocato' }

    state = {
    showLastName: true

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

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

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

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

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


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