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>)
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>)