[6.5.1] Changing Grid Title when titleBar is set fails

[thesandbender]

I'm running into a problem where a Grid that has the titleBar prop set fails to update when it's title prop is changed. constructor.updateTitleBar throws 'titleBar.getTitle is not a function' in this code block:

updateTitleBar:function(titleBar) {
  if (titleBar && !titleBar.getTitle()) {
    titleBar.setTitle(this.getTitle());
  }
}

A stripped down version of the render is below. If titleBar is not set on the grid, using the Previous/Next buttons above the grid works and the title changes (as well as the store and columns). If titleBar is set, the grid renders the first time but changing the projectName causes the titleBar.getTitle error. The individual buttons and the buttons embedded in the titleBar are using the same handlers. The handlers don't touch the grid props, they update a separate state and the grid and titlebar props are calculated from that in the render(). I've tried the following combinations:

1. grid.title set, grid.titleBar not set [PASS]
2. grid.title set, grid.titleBar set w/o titleBar.title [FAIL]
3. grid.title set, grid.titleBar set w/ titleBar.title [FAIL]
4. grid.title not set, grid.titleBar set w/ titleBar.title [FAIL]

I did notice the titleBar prop is not listed in the ExtReact documentation but it is used in the BigData grid example.

const titleBarProps:any = {
    title  : projectName,
    shadow : false,
    items  : [{
        align   : 'left',
        xtype   : 'button',
        iconCls : 'x-fa fa-chevron-left',
        handler : this.props.onPreviousProject    
    },{
        align   : 'right',
        xtype   : 'button',
        iconCls : 'x-fa fa-chevron-left',
        handler : this.props.onNextProject    
    }]
}


return (<Container>
    <Button text="Previous" handler={this.props.onPreviousProject} />
    <Button text="Next" handler={this.props.onNextProject} />
    <Grid
        title={projectName}
        store={project.store}
        columns={(columns as any)}
        titleBar={titleBarProps}
        {...this.gridProps}
    />                                    
</Container>)

[Mark.Brocato]

I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#...or&fiddle/24uk

[Mark.Brocato]

Thanks for the report! I have opened a bug in our bug tracker.

[thesandbender]

I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#...or&fiddle/24uk

That's what I ended up doing, that works perfectly.

[LesJ]

I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#...or&fiddle/24uk

Why am I seeing this error in the fiddle's console?

Uncaught TypeError: Cannot read property 'tab' of null
at ai.enactReact (/classic/app.js?_dc=20170711084405:3)
at /classic/framework.js?_dc=20170711084405:1
at ai.fire (/classic/framework.js?_dc=20170711084405:1)
at ai.doFireEvent (/classic/framework.js?_dc=20170711084405:1)
at ai.f.doFireEvent (/classic/framework.js?_dc=20170711084405:1)
at ai.fireEventArgs (/classic/framework.js?_dc=20170711084405:1)
at ai.fireEvent (/classic/framework.js?_dc=20170711084405:1)
at ai.onProxyLoad (/classic/framework.js?_dc=20170711084405:1)
at ai.triggerCallbacks (/classic/framework.js?_dc=20170711084405:1)
at ai.setCompleted (/classic/framework.js?_dc=20170711084405:1)

[LesJ]

I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#...or&fiddle/24uk

I wish there was some sort of indicator in the list of bugs showing which bug includes a fiddle.

The fiddles that you provide are a very useful learning tool.

[thesandbender]

Why am I seeing this error in the fiddle's console?

Uncaught TypeError: Cannot read property 'tab' of null

For what it's worth I get the same with the fiddle (Chrome 60.0.3112.90/Linux 64bit)

[LesJ]

For what it's worth I get the same with the fiddle (Chrome 60.0.3112.90/Linux 64bit)

I see the same error on a Mac.

Screen Shot 2017-08-11 at 4.27.20 PM.jpg