enter image description here
How I want it to look ^
Current Code:
Ext.create('Ext.Container', {
width: '100%',
layout: 'vbox',
renderTo: document.body,
defaults: {
xtype: 'container',
width: '50%',
layout: 'vbox',
border: 0
},
items: [{
bodyStyle: {},
defaults: {
style: {},
},
items: [{}]
}, {
items: [{
xtype: 'container',
style: {},
}, {
xtype: 'container',
style: {
'background': 'grey',
'color': 'white',
'font-size': '15px',
},
width: '100%',
height: 50,
html: 'Layer 1 Header'
}, {
xtype: 'container',
style: {
'background': 'lightgrey',
'color': 'black',
'font-size': '15px',
},
width: '100%',
height: 200,
html: 'Layer 1 Body'
}, ]
}, {
xtype: 'container',
style: {
'background': 'darkred',
'color': 'white',
'font-size': '15px',
},
width: '25%',
height: 200,
html: 'Layer 2 Left'
}, {
xtype: 'container',
style: {
'background' : 'darkgreen',
'color' : 'white',
'font-size': '15px',
'pack': 'center',
},
width: '25%',
height: 200,
html: 'Layer 2 Right'
}
]
});
You can combine vbox / hbox layout with align set to stretch in order to achieve this layout. Check this code, tested in a Fiddle (ExtJS 7.3.0 - Material, classic toolkit):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo: document.body,
items: [{
xtype: 'container',
style: {
'background': 'grey',
'color': 'white',
'font-size': '15px',
},
height: 50,
html: 'Layer 1 Header'
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [, {
xtype: 'container',
flex: 1,
height: 200,
style: {
'background': 'darkred',
'color': 'white',
'font-size': '15px',
},
html: 'Layer 2 Left'
}, {
xtype: 'container',
flex: 1,
height: 200,
style: {
'background': 'darkgreen',
'color': 'white',
'font-size': '15px'
},
html: 'Layer 2 Right'
}]
}
]
});
}
});
Related
nesting list view is not scrolling horizontally in React-native
Parent list is working fine but child is not scrolling.
working fine for vertical scroll
dependencies:
"react": "18.1.0"
"react-native": "0.70.6",
"react-native-gesture-handler": "^2.9.0",
expo snack - https://snack.expo.dev/#mukeshbuwade/nestedflatlist
use flexDirection:'row' in outerItemContainer CSS,
import React, { useState } from 'react';
import { View, Text, StyleSheet, Animated ,} from 'react-native';
import {FlatList} from "react-native-gesture-handler"
const NestedFlatList = () => {
const [outerData, setOuterData] = useState([
{ id: '1', items: [{ name: 'Item 1-1' }, { name: 'Item 1-2' }, { name: 'Item 1-3' }] },
{ id: '2', items: [{ name: 'Item 2-1' }, { name: 'Item 2-2' }, { name: 'Item 2-3' }] },
{ id: '3', items: [{ name: 'Item 3-1' }, { name: 'Item 3-2' }, { name: 'Item 3-3' }] },
]);
const renderOuterItem = ({ item }) => (
<View style={styles.outerItemContainer}>
<Text style={styles.outerItemText}>{item.id}</Text>
<FlatList
data={item.items}
horizontal
renderItem={renderInnerItem}
keyExtractor={(innerItem) => innerItem.name}
contentContainerStyle={styles.innerList}
/>
</View>
);
const renderInnerItem = ({ item }) => (
<View style={styles.innerItemContainer}>
<Text style={styles.innerItemText}>{item.name}</Text>
</View>
);
return (
<Animated.FlatList
data={outerData}
horizontal
renderItem={renderOuterItem}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.outerList}
/>
);
};
const styles = StyleSheet.create({
outerList: {
alignItems: 'center',
paddingHorizontal: 10,
},
outerItemContainer: {
paddingVertical: 10,
alignItems: 'center',
backgroundColor: '#ddd',
flexDirection:'row',
borderRadius: 5,
marginHorizontal: 10,
width: 150,
},
outerItemText: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
innerList: {
paddingTop: 10,
alignItems: 'center',
},
innerItemContainer: {
paddingVertical: 10,
paddingHorizontal: 20,
alignItems: 'center',
backgroundColor: '#fff',
borderRadius: 5,
marginHorizontal: 10,
width: 100,
},
innerItemText: {
fontSize: 14,
textAlign: 'center',
},
});
export default NestedFlatList;
I have problem during editing rows in x-data-grid. My JSON:
[
{
"id": 1,
"name": "komputer",
"slider": true,
"producent": "asus",
"description": null,
"image": "../Images/komputer5.jpg",
"price": 1.0,
"categoryModel": {
"id": 1,
"name": "komputery"
}
}
]
As you can see, categoryModel is nested object. I display it like this:
const columns = [
{
field: 'name',
headerName: 'Kategoria',
width: 110,
editable: true,
renderCell: (params) => {
return (
<div>
{params.row.name}
</div>
)
}
}
];
But when i try to edit rows in this column i have warning:
Warning: Encountered two children with the same key, `name`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version
I have no idea how I can eliminate him. Other columns works fine. I tried to add a key in a div which is inside a render cell but had same warning.
All code:
const columns = [
{ field: 'id', headerName: 'ID', width: 90 },
{
field: 'name',
headerName: 'Nazwa',
width: 150,
editable: true,
},
{
field: 'slider',
headerName: 'Slider',
width: 150,
editable: true,
},
{
field: 'producent',
headerName: 'Producent',
width: 150,
editable: true,
},
{
field: 'descritpion',
headerName: 'Opis',
width: 150,
editable: true,
},
{
field: 'image',
headerName: 'Zdjęcie',
width: 150,
editable: true,
},
{
field: 'price',
headerName: 'Cena',
width: 150,
editable: true,
},
{
field: 'name',
headerName: 'Kategoria',
width: 110,
editable: true,
renderCell: (params) => {
return (
<div>
{params.row.name}
</div>
)
}
},
{
field: 'fullNamed',
headerName: 'Akcja',
width: 80,
renderCell: (params) => {
return (
<div style = {{display:'flex', justifyContent: 'center'}}>
<IconButton onClick={() => console.log(params.id)}>
<EditIcon />
</IconButton>
<IconButton onClick={() => console.log(params.id, params.row.name)}>
<DeleteIcon />
</IconButton>
</div>
);
}
},
];
return (
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
rows={products}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
disableSelectionOnClick
experimentalFeatures={{ newEditingApi: true }}
/>
</Box>
)
as i scroll horizontally column data is getting shifted too.
Ex: Here MRN/PATIENT ACCOUNT# value is ABC12345
As i scroll horizontally to check the remaining columns
Here MRN/PATIENT ACCOUNT#'s value(ABC12345) is under Payer Alias column
As i scroll further horizontally
Here MRN/PATIENT ACCOUNT#'s value(ABC12345) is under RenderingNpi
I am using DataGrid from Mui
<DataGrid
title='All Claims'
rows={claimTableData}
getRowId={(row)=>row.patient_eligibility_id}
columns={ELIGIBILITY_TABLE_COLUMNS}
rowsPerPageOptions={[]}
checkboxSelection
onSelectionModelChange={(newSelectionModal) => {
setSelectedData(newSelectionModal)
}}
components={{
Toolbar: customToolBar
}}
componentsProps={{
toolbar: { minHeight: '10px' }
}}
hideFooter
/>
export const ELIGIBILITY_TABLE_COLUMNS = [
{
headerName: 'PATIENT FIRST NAME',
field: 'first_name',
width: 200,
align: 'left'
},
{
headerName: 'PATIENT LAST NAME',
field: 'last_name',
width: 200,
align: 'left'
},
{
headerName: 'DATE OF BIRTH',
field: 'date_of_birth',
width: 200,
renderCell: (params) => (
<span>
{params.value && moment(params.value).isValid() ? moment(params.value).format('MM/DD/YYYY') : ''}
</span>
),
align: 'left'
},
{
headerName: 'FROM DATE OF SERVICE',
field: 'from_date_of_service',
width: 200,
renderCell: (params) => (
<span>
{params.value && moment(params.value).isValid() ? moment(params.value).format('MM/DD/YYYY') : ''}
</span>
),
align: 'left'
},
{
headerName: 'TO DATE OF SERVICE',
field: 'to_date_of_service',
width: 200,
renderCell: (params) => (
<span>
{params.value && moment(params.value).isValid() ? moment(params.value).format('MM/DD/YYYY') : ''}
</span>
),
align: 'left'
},
{
headerName: 'MRN/PATIENT ACCOUNT#',
field: 'mrn_patient_account_no',
width: 200,
align: 'left'
},
{
headerName: 'PAYER ALIAS',
field: 'payer_alias',
width: 200,
align: 'left'
},
{
headerName: 'SERVICE TYPE',
field: 'service_type_id',
width: 200,
align: 'left'
},
{
headerName: 'MEMBER ID',
field: 'member_id',
width: 200,
align: 'left'
},
{
headerName: 'RENDERING NPI',
field: 'provider_npi',
width: 200,
align: 'left'
},
{
headerName: 'CLIENT ID',
field: 'client_id',
width: 200,
align: 'left'
},
{
headerName: 'PAYER NAME',
field: 'external_payer_name',
width: 200,
align: 'left'
},
{
headerName: 'EXTERNAL PAYER ID',
field: 'payer_id',
width: 200,
align: 'left'
},
{
headerName: 'ELIGIBILITY STATUS',
field: 'eligibility_status',
width: 200,
align: 'left'
},
{
headerName: 'GROUP NAME',// no value
field: 'group_name',
width: 200,
align: 'left'
},
{
headerName: 'UPLOAD DATE',
field: 'created_on',
width: 200,
renderCell: (params) => (
<span>
{params.value && moment(params.value).isValid() ? moment(params.value).format('MM/DD/YYYY HH:mm:ss') : ''}
</span>
),
align: 'left'
},
{
headerName: 'LAST VERIFIED',
field: 'modified_on',
width: 200,
renderCell: (params) => (
<span>
{params.value && moment(params.value).isValid() ? moment(params.value).format('MM/DD/YYYY') : ''}
</span>
),
align: 'left'
},
{
headerName: 'PROCESSING STATUS',
field: 'processing_status',
width: 200,
align: 'left'
},
{
headerName: 'COMMENTS/RESONS',
field: 'comments',
width: 200,
align: 'left'
}
]
i create pie chart using echarts-for-react i need remplace colors to linear gradient
const color =["red","green","blue,"yellow"]
const option = {
color: color,
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: data,
label: {
fontSize: 18,
color: 'red'
},
labelLayout: {
verticalAlign: 'bottom',
align: "center"
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
return (
<div style={{ height: "1000px" }}>
<ReactEcharts
option={option}
/>{" "}
</div>
)
}
export default PieChart
I am currently working on a small project, in this project I use a tree structure Table as shown!
enter image description here
As in the picture is the Table in the old project, I use the Ant Design library (with code support on the homepage), so it is hardly difficult to create such a Table. The code form is as follows:
const columns = [
{
title: '', dataIndex: 'name', key: 'name', width: '20%'
},
{
title: '', dataIndex: 'User1', key: 'User1', width: '10%',
},
{
title: '', dataIndex: 'User2', width: '10%', key: 'User2',
}
];
const data = [
{
key: 1,
name: <h3 style={{ fontSize: "16px", color: "white" }}>Module 1</h3>,
children: [],
},
{
key: 2,
name: <h3 style={{ fontSize: "16px", color: "white", }} className="level0">Module 2</h3>,
children: [
{
key: 21,
name: <p style={{ fontSize: "14px", color: "white" }}>Function name</p>,
User1: <p style={{ fontSize: "14px", color: "white" }}>User 1</p>,
User2: <p style={{ fontSize: "14px", color: "white" }}>User 2</p>,
children: [
{
key: 211,
name: <p style={{ fontWeight: "bold" }}>Function 1</p>,
User1: '',
User2: '',
children: [
{
key: 2111,
name: <p>Feature 1</p>,
User1: <Checkbox />,
User2: <Checkbox />,
}
],
},
{
key: 221,
name: <p style={{ fontWeight: "bold" }}> Function 2</p>,
User1: '',
User2: '',
children: [
{
key: 2211,
name: <p>Feature 1</p>,
User1: <Checkbox />,
User2: <Checkbox />,
}
]
}
],
},
],
},
];
return (
<Table
columns={columns}
dataSource={data}
pagination={{ pageSize: 5, hideOnSinglePage: true }}
>
</Table>
);
}
But in the Material-UI, I don't know how to create a Table like that!
I've only been learning ReactJS for a month and have just used this library for the first time.
Could you show me how to do it?
Thanks for reading!
(English isn’t my first language, so please excuse my mistakes!)