PDA

View Full Version : [OPEN] [6.5.1] Changing Grid Title when titleBar is set fails



thesandbender
9 Aug 2017, 1:42 PM
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:



grid.title set, grid.titleBar not set [PASS]
grid.title set, grid.titleBar set w/o titleBar.title [FAIL]
grid.title set, grid.titleBar set w/ titleBar.title [FAIL]
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
10 Aug 2017, 6:05 AM
I suggest docking your own TitleBar to the top of the grid:

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

Mark.Brocato
10 Aug 2017, 6:06 AM
Thanks for the report! I have opened a bug in our bug tracker.

thesandbender
10 Aug 2017, 6:10 AM
I suggest docking your own TitleBar to the top of the grid:

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

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

LesJ
10 Aug 2017, 10:21 AM
I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#view/editor&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
10 Aug 2017, 10:37 AM
I suggest docking your own TitleBar to the top of the grid:

https://fiddle.sencha.com/?extreact#view/editor&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
10 Aug 2017, 10:40 AM
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
11 Aug 2017, 1:29 PM
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.

56786