panel hide when collapse in extjs - forms

I try to explain my problem. I have a tab panel. In one tab I have a form panel and a grid panel, both collapsable. When I collapse the form panel it will collapse, when I collapse the gridpanel both are collapsed. Now when I uncollapse one of the two panels the other one disappears. What could this be?
Ext.define('MyApp.view.TMS', {
extend: 'Ext.container.Viewport',
id: 'tmsViewport',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'tabpanel',
id: 'mainTab',
activeTab: 0,
region: 'center',
items: [{
xtype: 'panel',
id: 'configurationTab',
title: 'Configuration',
items: [{
xtype: 'tabpanel',
id: 'configurationVehicles',
title: 'configuration',
activeTab: 0,
items: [{
xtype: 'panel',
id: 'configurationDrivers',
collapsed: false,
title: 'Drivers',
items: [{
xtype: 'form',
floating: false,
height: 400,
id: 'configurationDriversConfiguration',
itemId: 'configurationDriversConfiguration',
bodyPadding: 10,
animCollapse: false,
collapsed: false,
collapsible: true,
title: 'Driver Configuration',
items: [{
xtype: 'button',
id: 'configurationDriversAdd',
text: 'Add'
}, {
xtype: 'button',
id: 'configurationDriversDelete',
text: 'Delete'
}, {
xtype: 'textfield',
id: 'configurationDriversCode',
fieldLabel: 'Driver Code'
}, {
xtype: 'textfield',
id: 'configurationDriversName',
fieldLabel: 'Driver Name'
}, {
xtype: 'textfield',
id: 'configurationDriversLicense',
fieldLabel: 'Driver License nr'
}, {
xtype: 'textfield',
id: 'configurationDriversGivenName',
fieldLabel: 'Driver Given Name'
}, {
xtype: 'textfield',
id: 'configurationDriversFamilyName',
fieldLabel: 'Driver Familiy Name'
}, {
xtype: 'textfield',
id: 'configurationDriversPhone',
fieldLabel: 'Driver Phone Nr'
}, {
xtype: 'textfield',
id: 'configurationDriversEmail',
fieldLabel: 'Driver Email'
}, {
xtype: 'combobox',
id: 'configurationDriversProvider',
fieldLabel: 'Provider',
displayField: 'name',
store: 'comboProviders',
valueField: 'id'
}, {
xtype: 'textareafield',
id: 'configurationDriversMemo',
fieldLabel: 'Memo'
}, {
xtype: 'button',
handler: function (button, event) {
var form = document.forms;
Ext.MessageBox.alert('Submitted Values', form.getValues(true));
},
height: 37,
id: 'configurationDriversSave',
text: 'Save'
}]
}, {
xtype: 'gridpanel',
height: 300,
id: 'configurationDriversGrid',
itemId: 'configurationDriversGrid',
animCollapse: false,
collapsible: true,
title: 'Drivers',
store: 'gridDrivers',
viewConfig: {
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'version',
text: 'Version'
}, {
xtype: 'gridcolumn',
dataIndex: 'driverId',
text: 'DriverId'
}, {
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
}, {
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
}, {
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
}, {
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Email'
}, {
xtype: 'gridcolumn',
dataIndex: 'workPhone',
text: 'WorkPhone'
}, {
xtype: 'gridcolumn',
dataIndex: 'note',
text: 'Note'
}, {
xtype: 'gridcolumn',
dataIndex: 'licenseNumber',
text: 'LicenseNumber'
}, {
xtype: 'gridcolumn',
dataIndex: 'providerId',
text: 'ProviderId'
}]
}]
}]
}]
}]
}]
});
me.callParent(arguments);
}
});

It's hard to say anything without having a fiddle or some simpler sample, but looking at your code I noticed one interesting thing:
You have layout: border only on the top level and then you have many nested panels inside. Try to define border layout in the container that contains your two panels that are collapsing.

If you are going to use a border layout you may want to refer to this: http://docs.sencha.com/ext-js/4-0/#!/example/layout/border.html I've only ever used this for the east and west panels to hiding and showing additional information on an event trigger. Since you already have IDs it would probably be better to manually trigger those specifically.

Related

my mui dataTable in not responsive yet iam using FLEX 1;

const columns = [
{ field: 'id', headerName: 'ID', },
{
field: 'moduleName',
headerName: 'Module Name',
flex: 1,
editable: false,
sortable: false,
filter: false,
hideable: false
},
{
field: 'moduleCode',
headerName: 'Module Code',
flex:1,
align: "left",
editable: false,
sortable: false,
},
{
field: 'moduleType',
headerName: 'Module Type',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'yearOfStudy',
headerName: 'Year of Study',
type: 'number',
flrx: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'program',
headerName: 'program',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
{
field: 'programCode',
headerName: 'Program Code',
type: 'number',
flex: 1,
sortable: false,
editable: false,
align: "left",
headerAlign: 'left'
},
];
this is how it looks on the pc
enter image description here
now this is on mobile it is not responsive
enter image description here this mobile it is not responsive
mui datagrid by setting columns to
flex it is not responsive on mobiles phones it is just truncating the text instead of flex

How to show a column only when authenticated

I'm building an app using React and MaterialUI. In the DataGrid is there a way to show or "hide" a specific column ? My last column is called action and I have the delete in there and would like to show it to ppl who are loggged in.
Here's my test component.
I've put the part of the code that I thought would do it but unfortunately it's not the case
import { useContext } from 'react';
import { Box} from '#mui/material';
import { DataGrid, GridActionsCellItem } from '#mui/x-data-grid';
import { BacsRoulantsContext } from '../contexts/BacsRoulantsContext';
import { Delete as DeleteIcon } from '#mui/icons-material';
const trashRows = [
{
id: 1,
serialNumber: '123456',
rfidChip: '123455',
bacType: 'DECHETS-360',
deliveryDate: '2002-03-03',
},
{
id: 2,
serialNumber: '7890112',
rfidChip: '123455',
bacType: 'DECHETS-360',
deliveryDate: '2002-10-03',
},
];
export default function Configuration() {
const { isAuthenticated } = useContext(BacsRoulantsContext);
const BINSCOLUMNS = [
{
field: 'id',
headerName: 'ID',
width: 50,
},
{
field: 'serialNumber',
headerName: 'Numéro de série',
width: 150,
editable: true,
},
{
field: 'rfidCode',
headerName: 'Puce RFID',
width: 150,
},
{
field: 'description',
headerName: 'Type de bacs',
width: 150,
},
{
field: 'deliveryDate',
type: 'date',
headerName: 'Date de livraison',
width: 160,
},
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
**return [
{ isAuthenticated } && (
<GridActionsCellItem
icon={<DeleteIcon />}
label="Cancel"
onClick={() => console.log('MyID', id)}
/>
),
];**
},
},
];
return (
<Box sx={{ width: '100%' }}>
<DataGrid
autoHeight
columns={BINSCOLUMNS}
disableColumnMenu
hideFooter
disableSelectionOnClick
getRowId={(row) => row.id}
rows={trashRows}
/>
</Box>
);
}
For anyone who is wondering how to do it, I found a simple solution. I added the hide: !isAuthenticated on the column definition and that fixed my problem. Here the new column definition with the hide
const BINSCOLUMNS = [
{
field: 'id',
flex: 1,
headerName: 'ID',
sortable: false,
},
{
field: 'serialNumber',
flex: 1,
headerName: 'Numéro de série',
sortable: false,
},
{
field: 'rfidCode',
flex: 1,
headerName: 'Puce RFID',
sortable: false,
},
{
field: 'description',
flex: 1,
headerName: 'Type de bacs',
sortable: false,
},
{
field: 'deliveryDate',
flex: 1,
headerName: 'Date de livraison',
sortable: false,
type: 'date',
},
{
field: 'actions',
type: 'actions',
headerName: 'Actions',
hide: !isAuthenticated,
width: 100,
cellClassName: 'actions',
getActions: ({ id }) => {
return [
<GridActionsCellItem
icon={<DeleteIcon />}
label="Cancel"
onClick={() => console.log('MyID', id)}
/>,
];
},
},
];
Don't know if that's how I'm suppose to do it but works for me!

filling Grid panel from Store doesn't work EXTJS 4.2

Good Morning,
I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.
// Create store
var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
root: 'd',
id: 'Id',
fields: ['Id', 'FistName', 'LastName', 'BirthDate'],
autoLoad: true
});
//Create grid to display data from store
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{ xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }
]
});
and this is my viewport:
Ext.create('Ext.container.Viewport', {
layout: "border",
items: [{
region: "north",
height: 50,
title: "Nord"
}, {
region: "south",
height: 200,
title: "sud",
bodyStyle: 'background: #fffff;',
border: false
}, {
region: "center",
title: "centre",
bodyStyle: 'background: #00000;',
border: false,
items: gridTest
}, {
region: "west",
width: 100,
title: "ouest"
}, {
region: "east",
width: 100,
title: "est"
}]
});
and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:
{"d": [{
"__type":"WebService4ExtJS.Model.Person",
"Id":0,
"FirstName":"sami",
"LastName":"samibizani#gmail.com",
"BirthDate":"23188219"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":1,"FirstName":"admin",
"LastName":"admin#gmail.com",
"BirthDate":"1111111"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":2,
"FirstName":"user",
"LastName":"user#gmail.com",
"BirthDate":"2222222"
}]
}
Your Store reader is not defined:
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
}
You can find the working code here.
And one little mistake: in the fields array, you wrote FistName instead of FirstName.

The content in form window is not selectable. It also drag the whole inner content when try to select. how to avoid it

var settingForm = Ext.create('Ext.form.Panel', {
frame: false,
bodyStyle: 'padding:5px 5px 0',
modal: true,
resizable: false,
draggable: true,
forceSelection: true,
fieldDefaults: {
labelAlign: 'right',
//msgTarget: 'side',
labelWidth: 140
},
items: [{
xtype: 'fieldset',
anchor: '100%',
title: 'Some Information',
layout: 'column',
items: [{
xtype: 'container',
columnWidth: .5,
layout: 'anchor',
items: [{
xtype: 'hiddenfield',
name: 'txtHiddenId',
id: 'txtHiddenId'
}, {
xtype: 'textfield',
fieldLabel: 'Host Name',
name: 'txtHostName',
id: 'txtHostNameId',
allowBlank: false,
anchor: '96%',
disabled: true,
enableKeyEvents: true,
listeners: {
keypress: function() {
manageUpdate();
},
specialkey: function(field, e) {
if (e.getKey() == "46" || e.getKey() == "8")
manageUpdate();
}
}
}
Remove draggable: true and forceSelection: true. See if it helps.

How to display Tips in Group Line Chart in Extjs 4?

I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.