Announcement
Collapse
No announcement yet.
X
-
The others were actually addressed yesterday, and you should find them fixed in today's builds, dated July 10 and later.
-
How are things going to fix errors? so far in the latest version, I see that only this has been fixed2. The may of the component is not created in <div id="app">, but in the main <body>
Leave a comment:
-
Originally posted by Hirn View PostI tried defining my class as described in the documentation without using SC.defineClass(), but then I can't override the properties of the inherited class. For example, properties like gridComponents, neither as static class properties nor as explicit object properties. Here is my example of class definition. I did everything as you advised, but it doesn't work.
Code:import 'smartclient-pro/release'; import { SC, ReactComponent, TreeGrid } from 'smartclient-pro/react'; let isc = window.isc; isc.defineClass("NoticesTreeGrid", isc.TreeGrid).addProperties({ autoFetchData: false, loadDataOnDemand: false, canEdit: false, showFilterEditor: true, showHover: true, cascadeSelection: false, defaultFields: [ { name: "command", title: "Command" }, { name: "argument 1", title: "Argument 1" }, { name: "argument 2", title: "Argument 2" }], gridComponents: ["header", "filterEditor", "body"] }); class NoticesTreeGrid extends TreeGrid { static ISC_CLASS_NAME = "NoticesTreeGrid"; static IS_CLASS = true; static PROPERTY_TYPES = {}; constructor(props) { super(props); } } ReactComponent.registerClass("NoticesTreeGrid", NoticesTreeGrid); export default NoticesTreeGrid;
Leave a comment:
-
I've redone the example https://smartclient.com/smartclient-...gridComponents And it doesn't work
All the errors I described are shown in this example
Code:import React, { Component } from 'react'; import { TreeGrid, TGField } from 'smartclient-pro/react'; class App extends Component { constructor(param) { super(param); }; render() { return ( <TreeGrid width="500" height="300" showFilterEditor="true"> <fields> <TGField name="countryCode" title="Code" width="50" /> <TGField name="countryName" title="Country" /> <TGField name="capital" title="Capital" /> <TGField name="continent" title="Continent" /> </fields> <gridComponents> <value>header</value> <value>filterEditor</value> <value>body</value> </gridComponents> </TreeGrid> ); } } export default App;
Last edited by Hirn; 20 May 2024, 21:23.
Leave a comment:
-
In the case of your sample code, defineClass() will work fine so there's no need to complicate the situation.
You need to either call SC.defineClass(), or explicitly extend one of our existing React wrapper classes when creating a custom component class, not both. Our documentation shows each approach, but they are mutally exclusive.
Code:import { SC, ReactComponent, TreeGrid } from 'smartclient-pro/react'; class NoticesTreeGrid extends TreeGrid { static IS_CLASS = true; constructor(props) { super(props); } static defaultFields = [ { name: "command", title: "Command" }, { name: "argument 1", title: "Argument 1" }, { name: "argument 2", title: "Argument 2" }]; static gridComponents = ["header", "filterEditor", "body"]; } ReactComponent.registerClass("NoticesTreeGrid", NoticesTreeGrid); export default NoticesTreeGrid;
If on the other hand, you want to integrate a completely custom React class around your SmartClient subclass, you'll have to do a bit more work by first defining the React class yourself like:
// ... standard imports (see first sample)
import { Canvas } from 'smartclient-eval/react';
class MyCanvas extends Canvas {
static ISC_CLASS_NAME = "MyCanvas";
static IS_CLASS = true;
// ... your custom code
}
and then registering it by calling
ReactComponent.registerClass("MyCanvas", MyCanvas);
...
...
Note that ISC_CLASS_NAME declares the name of the underlying SmartClient framework class used by your new React component. So if you've not defined such a custom subclass (e.g. via SmartClient framework method isc.defineClass() then you should exclude that line.Last edited by Hirn; 20 May 2024, 20:39.
Leave a comment:
-
Please re-read our response in your other thread here. You need to either call SC.defineClass(), or explicitly extend one of our existing React wrapper classes when creating a custom component class, not both. Our documentation shows each approach, but they are mutally exclusive. In the case of your sample code, defineClass() will work fine so there's no need to complicate the situation.
Leave a comment:
-
REACT custom TreeGrid errors
I have created my own component inheriting from TreeGrid. But when creating HTML, I found several errors.
1. The filter button is invisible.
2. The may of the component is not created in <div id="app">, but in the main <body>
3. The height of isc_NoticesTreeGrid_0_filterEditor_body is 100px, not 22px as specified in the styles
4. The height of isc_NoticesTreeGrid_0_filterEditor_actionButton is also equal to 100px
my NoticesTreeGrid.js
Code:import { SC, ReactComponent, TreeGrid } from 'smartclient-pro/react'; let isc = window.isc; SC.defineClass("NoticesTreeGrid", TreeGrid); class NoticesTreeGrid extends TreeGrid { static ISC_CLASS_NAME = "NoticesTreeGrid"; static IS_CLASS = true; static NUMERIC_PROPERTIES = {}; static COMPOUND_PROPERTIES = {}; constructor(props) { super(props); } } isc.NoticesTreeGrid.addProperties({ autoFetchData: false, loadDataOnDemand: false, canEdit: false, showFilterEditor: true, showHover: true, cascadeSelection: false, defaultFields: [ { name: "command", title: "Command" }, { name: "argument 1", title: "Argument 1" }, { name: "argument 2", title: "Argument 2" }], gridComponents: ["header", "filterEditor", "body"] }); Object.defineProperty(NoticesTreeGrid, "name", { value: "NoticesTreeGrid" }); ReactComponent.registerClass("NoticesTreeGrid", NoticesTreeGrid); export default NoticesTreeGrid;
Code:import React, { Component } from 'react'; import NoticesTreeGrid from './NoticesTreeGrid.js'; class App extends Component { constructor(param) { super(param); }; render() { return ( <NoticesTreeGrid width="500" height="300" /> ); } } export default App;
created HTML
SNAPSHOT_v13.1d_2024-05-19Tags: None
Leave a comment: