import * as React from 'react'; import * as ReactDOM from 'react-dom'; import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons'; import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart'; import JqxDockingLayout, { IDockingLayoutProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockinglayout'; import JqxTextArea from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea'; import JqxTree from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtree'; class App extends React.PureComponent<{}, IDockingLayoutProps> { private myDockingLayout = React.createRef(); private textArea1 = React.createRef(); private viewServerExplorerBtn = React.createRef(); constructor(props: {}) { super(props); this.viewServerExplorerBtnOnClick = this.viewServerExplorerBtnOnClick.bind(this); const layout: IDockingLayoutProps['layout'] = [{ items: [{ alignment: 'left', items: [{ contentContainer: 'ToolboxPanel', title: 'Toolbox', type: 'layoutPanel' }, { contentContainer: 'HelpPanel', title: 'Help', type: 'layoutPanel', }], type: 'autoHideGroup', unpinnedWidth: 200, width: 80 }, { items: [{ height: 400, items: [{ contentContainer: 'Document1Panel', initContent: () => { ReactDOM.render(, document.querySelector('#Document1TextArea'), () => { this.textArea1.current!.val('\n\n\t\n\tPage Title\n\t\n\t\n\t\t

This is a Heading

\n\t\t

This is a paragraph.

\n\t\n'); }); }, title: 'index.htm', type: 'documentPanel' }, { contentContainer: 'Document2Panel', initContent: () => { ReactDOM.render(, document.querySelector('#Document2TextArea')); }, title: 'New Document', type: 'documentPanel' }], minHeight: 200, type: 'documentGroup' }, { height: 200, items: [{ contentContainer: 'ErrorListPanel', title: 'Error List', type: 'layoutPanel', }, { contentContainer: 'PerformancePanel', initContent: () => { const data = [1, 5, 12, 5, 33, 38, 40, 42, 18, 18, 70, 76, 75, 99, 100, 88, 64, 13, 19, 15]; const padding = { left: 0, top: 10, right: 0, bottom: 0 }; const titlePadding = { left: 0, top: 0, right: 0, bottom: 0 }; const xAxis = { visible: false, valuesOnTicks: false }; const seriesGroups: IChartProps['seriesGroups'] = [{ columnsGapPercent: 0, columnsMaxWidth: 2, series: [{ colorFunction(value: any) { if (value <= 33) { return '#32CD32'; } else if (value <= 66) { return '#FFD700'; } else { return '#AA4643'; } }, linesUnselectMode: 'click' }], type: 'line', valueAxis: { minValue: 0, visible: false } }]; ReactDOM.render( , document.querySelector('#cpuUsage') ); }, selected: true, title: 'Performance', type: 'layoutPanel' }], minHeight: 200, pinnedHeight: 30, type: 'tabbedGroup' }], orientation: 'vertical', type: 'layoutGroup', width: 500 }, { items: [{ contentContainer: 'SolutionExplorerPanel', initContent: () => { // initialize a jqxTree inside the Solution Explorer Panel const source = [{ expanded: true, icon: 'https://www.jqwidgets.com/react/images/earth.png', items: [{ expanded: true, icon: 'https://www.jqwidgets.com/react/images/folder.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.base.css' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.energyblue.css' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqx.orange.css' }], label: 'css' }, { icon: 'https://www.jqwidgets.com/react/images/folder.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxcore.js' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxdata.js' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'jqxgrid.js' }], label: 'scripts', }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'index.htm', selected: true }], label: 'Project' }]; ReactDOM.render(, document.querySelector('#solutionExplorerTree')); }, title: 'Solution Explorer', type: 'layoutPanel' }, { contentContainer: 'PropertiesPanel', title: 'Properties', type: 'layoutPanel' }], minWidth: 200, type: 'tabbedGroup', width: 220 }], orientation: 'horizontal', type: 'layoutGroup' }]; this.state = { layout } } public render() { return (
{/* The panel content divs can have a flat structure */} {/* autoHideGroup */}
List of tools
Help topics
{/* documentGroup */}
{/* bottom tabbedGroup */}
No errors.
{/* right tabbedGroup */}
List of properties

View Server Explorer
); } private viewServerExplorerBtnOnClick(): void { this.myDockingLayout.current!.addFloatGroup(300, 200, { x: 500, y: 200 }, 'layoutPanel', 'Server Explorer', '
', (): void => { const source = [{ expanded: true, icon: 'https://www.jqwidgets.com/react/images/dataadapter.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/validator.png', label: 'northwinddatabase.mdf' }], label: 'Data Connections' }, { icon: 'https://www.jqwidgets.com/react/images/nav1.png', items: [{ icon: 'https://www.jqwidgets.com/react/images/nav1.png', label: 'WorkStation3-PC' }, { icon: 'https://www.jqwidgets.com/react/images/dragdrop.png', label: 'SharePoint Connections' }], label: 'Servers' }]; ReactDOM.render(, document.querySelector('#serverExplorerTree')); } ); this.viewServerExplorerBtn.current!.setOptions({ disabled: true }); } } export default App;