Occurs when the layout is performed.
Code examples
Bind to the layout
event of jqxDockPanel.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
class App extends React.PureComponent<{}, IDockPanelProps> {
private myDockPanel = React.createRef<JqxDockPanel>();
public componentDidMount(): void {
this.myDockPanel.current!.setOptions({ layout: {} });
}
public render() {
return (
<JqxDockPanel ref={this.myDockPanel} onLayout={this.onLayout}
width={300} height={200}>
<div dock='left' style='background: #486974;'> First Div </div>
<div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
<div dock='right' style='background: #df7169;'> Third Div </div>
<div style='background: #a73654;'> Fourth Div </div>
</JqxDockPanel>
);
}
private onLayout(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);