Results 1 to 2 of 2

Thread: Populate D3_Tree store on componentDidMount

  1. #1
    Sencha User
    Join Date
    Mar 2019
    Posts
    24
    Answers
    5

    Default Answered: Populate D3_Tree store on componentDidMount

    I have an application where tabs are generated dynamically. An Id is sent as a prop to a component within the tab to populate the data. The component within the tab is responsible for populating itself based on the id. I have a entire framework and errorhandling when calling our web apis so I would like to populate the store (Ext.data.TreeStore) based on the id sent in the props in the componentDidMount method but I'm not sure how. I've tried using store.setData, store.loadData, store.load and nothing appears to be displaying the data.

  2. I found a way to accomplish what it is I'm trying to do. Basically, xt.data.TreeStore just creates a store object for you. I populate my store in componentDidMount and set the component state which is then used by the D3 Tree component. Below is an example (the data would actually come from my api service framework). Hope this helps someone else.

    Code:
    componentDidMount(){    let store = Ext.create('Ext.data.TreeStore', {
            autoLoad: true,
            type: 'tree',
            data: [
                {  text: 'Hulk',
                  value : 5,
                  children: [
                        { text: 'The Leader', value: 3 },
                        { text: 'Abomination', value: 2 },
                        { text: 'Sandman', value: 1 }
                    ]
                },
                {   text: 'Vision',
                    value : 4,
                    children: [
                        { text: 'Kang', value: 4 },
                        { text: 'Magneto', value: 3 },
                        { text: 'Norman Osborn', value: 2 },
                        { text: 'Anti-Vision', value: 1 }
                    ]
                },
                {   text: 'Ghost Rider',
                    value : 3,
                    children: [
                        { text: 'Mephisto', value: 1 }
                    ]
                },
                {   text: 'Loki',
                    value : 2,
                    children: [
                        { text: 'Captain America', value: 3 },
                        { text: 'Deadpool', value: 4 },
                        { text: 'Odin', value: 5 },
                        { text: 'Scarlet Witch', value: 2 },
                        { text: 'Silver Surfer', value: 1 }
                    ]
                },
                {   text: 'Daredevil',
                    value : 1,
                    children: [
                        { text: 'Purple Man', value: 4 },
                        { text: 'Kingpin', value: 3 },
                        { text: 'Namor', value: 2 },
                        { text: 'Sabretooth', value: 1 }
                    ]
                }
            ]
          })
    
    
        this.setState({ treeStore: store })
    }
    
    
    ...
    
    
    <D3_Tree
        store={this.state.treeStore}

  3. #2
    Sencha User
    Join Date
    Mar 2019
    Posts
    24
    Answers
    5

    Default

    I found a way to accomplish what it is I'm trying to do. Basically, xt.data.TreeStore just creates a store object for you. I populate my store in componentDidMount and set the component state which is then used by the D3 Tree component. Below is an example (the data would actually come from my api service framework). Hope this helps someone else.

    Code:
    componentDidMount(){    let store = Ext.create('Ext.data.TreeStore', {
            autoLoad: true,
            type: 'tree',
            data: [
                {  text: 'Hulk',
                  value : 5,
                  children: [
                        { text: 'The Leader', value: 3 },
                        { text: 'Abomination', value: 2 },
                        { text: 'Sandman', value: 1 }
                    ]
                },
                {   text: 'Vision',
                    value : 4,
                    children: [
                        { text: 'Kang', value: 4 },
                        { text: 'Magneto', value: 3 },
                        { text: 'Norman Osborn', value: 2 },
                        { text: 'Anti-Vision', value: 1 }
                    ]
                },
                {   text: 'Ghost Rider',
                    value : 3,
                    children: [
                        { text: 'Mephisto', value: 1 }
                    ]
                },
                {   text: 'Loki',
                    value : 2,
                    children: [
                        { text: 'Captain America', value: 3 },
                        { text: 'Deadpool', value: 4 },
                        { text: 'Odin', value: 5 },
                        { text: 'Scarlet Witch', value: 2 },
                        { text: 'Silver Surfer', value: 1 }
                    ]
                },
                {   text: 'Daredevil',
                    value : 1,
                    children: [
                        { text: 'Purple Man', value: 4 },
                        { text: 'Kingpin', value: 3 },
                        { text: 'Namor', value: 2 },
                        { text: 'Sabretooth', value: 1 }
                    ]
                }
            ]
          })
    
    
        this.setState({ treeStore: store })
    }
    
    
    ...
    
    
    <D3_Tree
        store={this.state.treeStore}

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
  •