| Name | Type | Default |
|---|---|---|
| disabled | boolean | false |
|
Gets whether the dockpanel is disabled. /* 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 render() {
return (
<JqxDockPanel ref={this.myDockPanel}
width={300} height={200} disabled={true}>
<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>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | null |
|
Sets or gets the dockpanel's height. /* 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 render() {
return (
<JqxDockPanel ref={this.myDockPanel}
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>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| lastchildfill | boolean | true |
|
When true, the last child gets the available width and height. /* 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 render() {
return (
<JqxDockPanel ref={this.myDockPanel}
width={300} height={200} lastchildfill={true}>
<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>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | null |
|
Sets or gets the dockpanel's width. /* 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 render() {
return (
<JqxDockPanel ref={this.myDockPanel}
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>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| layout | Event | |
|
Occurs when the layout is performed. Code examples
Bind to the
/* 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);
|
||
Methods |
||
| Name | Arguments | Return Type |
| refresh | None | |
|
Refreshes the DockPanel. /* 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!.refresh();
}
public render() {
return (
<JqxDockPanel ref={this.myDockPanel}
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>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||