React UI Components Documentation

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300} 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.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300}>
                <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.getElementById('app'));

Sets or gets the lastchildfill property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300} 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.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300}>
                <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.getElementById('app'));

Occurs when the layout is performed.

Code examples

Bind to the layout event of jqxDockPanel.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDockPanel.on('layout', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300}>
                <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.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDockPanel from 'jqwidgets-react/react_jqxdockpanel.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDockPanel.refresh();
    }

    render() {       
        
        return (
            <JqxDockPanel ref='myDockPanel'  width={300} height={300}>
                <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.getElementById('app'));