Radio take name from radiogroup in ExtJS - javascript

how I can automaticly pickup a name from radiogroup and pass it to radio element:
xtype: 'radiogroup',
fieldLabel: 'Is Sale scheduled',
name: 'SaleScheduled',
items: [
{ boxLabel: 'Yes', name: 'SaleScheduled', inputValue: 'YES' },
{ boxLabel: 'No', name: 'SaleScheduled', inputValue: 'NO' }
],
....
I tryed to use name: this.getName() or this.findParentByType ('radiogroup')
I try to created extended radiogroup element that will have to chooses Yes or No and I can have it defined as xtype

If I understand you right, you're looking for a YesNoRadioGroup which passes its name onto its child elements:
Ext.ns('Ext.ux');
Ext.ux.YesNoGroup = Ext.extend(Ext.form.RadioGroup, {
constructor: function(cfg) {
cfg = cfg || {};
cfg.items = [
{ boxLabel: 'Yes', name: cfg.name, inputValue: 'YES' },
{ boxLabel: 'No', name: cfg.name, inputValue: 'NO' }
];
Ext.ux.YesNoGroup.superclass.constructor.call(this, cfg);
}
});
Ext.reg('yes-no-group', Ext.ux.YesNoGroup);
Alternatively you could do the same as above but add an addItem function which does similar work if you want more flexibility.

Related

Change properties from cell grid and refresh?

I have a grid that when is clicked change the property cellwrap from false to true
onCellClick: function(view, td, index, record, tr, rindex) {
var
me = this,
vm = me.getViewModel(),
field = me.lookupReference('descriptionField');
field.cellWrap = true;
field.getView().getStore().getSource().reload();
}
But i guess im making it wrong. Can i reload the grid with the cellwrap propertie change? Im using the v7.5.1.20
cellWrap is a configuration of an Ext.grid.column.Column. You can't simply change it after the grid is rendered, you need to use the reconfigure method of Ext.grid.Panel to update the columns and set cellWrap to true.
You can try this code in a Sencha Fiddle (ExtJS 7.4.0 modern material), click anywhere and see how the top left cell is changing:
Ext.application({
name: 'Fiddle',
launch: function () {
const store = new Ext.data.Store({
fields: ['name', 'phone'],
data: [{
name: 'Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1 Name1',
phone: 111
}, {
name: 'Name2',
phone: 222
}, {
name: 'Name3',
phone: 333
}, {
name: 'Name4',
phone: 444
}, {
name: 'Name5',
phone: 555
}]
})
const myGrid = Ext.create({
renderTo: Ext.getBody(),
xtype: 'grid',
store: store,
selModel: 'cellmodel',
columns: [{
text: 'Name',
dataIndex: 'name',
cellWrap: false
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e, eOpts) {
myGrid.reconfigure(null, [{
text: 'Name',
dataIndex: 'name',
cellWrap: true
}, {
text: 'Phone',
dataIndex: 'phone'
}]);
}
}
});
}
});

AgGrid access base component's hook inside frameworkComponents [duplicate]

I am using a AGGrid (actually via custom wrapper) and I have checkoboxes on each row.
Also, I have a bottom row with buttons. I want to enable/disable the buttons based on selected rows.
<AgGrid
id="dataListGrid"
containerProps={{style: {height: gridData.length * 30, minHeight: 180}}}
className="customGrid"
columnDefs={dataListColumns}
frameworkComponents={{checkboxColRenderer: checkboxColRenderer}}
gridDescription="List"
onGridReady={handleGridReady}
rowData={gridData}
enableBrowserTooltips={true}
pagination
paginationPageSize={100}
onCellClicked={onCellClicked}
onRowSelected={(params) => {
params.api.redrawRows({
rowNodes: [params.api.getPinnedBottomRow(0)],
});
}}
isFullWidthCell={(rowNode) => rowNode.rowPinned === 'bottom'}
fullWidthCellRenderer={CustomPinnedRowRenderer}
pinnedBottomRowData={[{}]}
{...props}
/>
My data looks like below;
let gridData = [{
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
setDataListColumns(DataListColumns);
setGridData(gridData);
Below is how my CustomPinnedRowRenderer looks;
class CustomPinnedRowRenderer {
init(params) {
this.eGui = document.createElement('div');
// QUESTION : I want to access the grid data here...param.api.data shows empty object {}
const selectedNodes = params.api.getSelectedNodes();
this.eGui.innerHTML = finalDOMStr; //finalDOMStr has HTML
}
getGui() {
return this.eGui;
}
refresh() {
return false;
}
}
My question is inside the CustomPinnedRowRenderer (on row select), I want to check the param.api.data (so that I can accordingly render enabled/disabled buttons)
But param.api.data seems to be empty object for some reason ?
UPDATED
I tried adding the property "checked" to my data model and mapped to checked state as below
let gridData = [{
checked: true,
fmIdentifier: 'Test data 1',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data',
}, {
checked: false,
fmIdentifier: 'Test data 2',
category: 'Test',
comments: 'Test',
fm: 'Test',
gti: 'Test data',
wins: 'Test',
identifier: 'Test',
status: 'Test data X',
rowPinned: 'bottom'
}]
However, any checked data stays as checked i.e. I cannot uncheck
My checkboxColRenderer looks as below
import React from 'react';
export default (props) => {
return (
<span>
<input type="checkbox" checked={props.data.checked} />
</span>
);
};

Changing nested object's structure

I want to convert an object from one format to another. So far my attempts at doing this recursively failed; either I'm getting a maximum stack exception or I'm unable to iterate over all paths.
Let's assume we have an object that lists questions and their answers. There may be N questions and M answers.
Object at start:
var before = {
item: 'Question 1',
id: '1',
type: 'Question',
items: [
{
item: 'Answer 1',
id: '1.1',
type: 'Answer',
items:
[
{
item: 'Question 2',
id: '1.1.1',
type: 'Question',
items: [
{
item: 'Answer 2.1',
id: '1.1.1.1',
type: 'Answer'
},
{
item: 'Answer 2.2',
id: '1.1.1.2',
type: 'Answer'
}
]
}
// ...
]
}, {
item: 'Answer 1',
id: '1.2',
type: 'Answer',
items:
[
{
item: 'Question 3',
id: '1.2.1',
type: 'Question',
items: [
{
item: 'Answer 3.1',
id: '1.2.1.1',
type: 'Answer'
},
{
item: 'Answer 3.2',
id: '1.2.1.2',
type: 'Answer'
}
]
}
// ...
]
}
// ...
]
}
Object how it should look like (wrap all in 'items' array; change key names 'item' to 'title', 'id' to 'key', remove 'type', add 'color' depending on 'type'):
var after = {
items: [
{
title: 'Question 1',
key: '1',
color: 'Red',
items: [
{
title: 'Answer 1',
key: '1.1',
color: 'Blue',
items:
[
{
title: 'Question 2',
key: '1.1.1',
color: 'Red',
items: [
{
title: 'Answer 2.1',
key: '1.1.1.1',
color: 'Blue'
},
{
title: 'Answer 2.2',
key: '1.1.1.2',
color: 'Blue'
}
]
}
// ...
]
}, {
title: 'Answer 1',
key: '1.2',
color: 'Blue',
items:
[
{
title: 'Question 3',
key: '1.2.1',
color: 'Red',
items: [
{
title: 'Answer 3.1',
key: '1.2.1.1',
color: 'Blue'
},
{
title: 'Answer 3.2',
key: '1.2.1.2',
color: 'Blue'
}
]
}
// ...
]
}
// ...
]
}
]
}
It seems easy enough, but I can't get it to work. This is how I tried to iterate:
function iter(o) {
for(let k in o) {
if (!(['item', 'items', 'id'].includes(k))) // My object contains a few more keys I don't want to go down further into
continue
if (o[k] !== null && typeof o[k] === 'object') {
iter(o[k]); // Max stack exception
return;
}
}
};
Thank you very much!
You could map the objects and rename the keys and map nested items.
const
iter = ({ item: title, id: key, type, items, ...o }) => ({
title,
key,
color: 'color' + key,
...o,
...(items && { items: items.map(iter) })
}),
before = { item: 'Question 1', id: '1', type: 'Question', items: [{ item: 'Answer 1', id: '1.1', type: 'Answer', items: [{ item: 'Question 2', id: '1.1.1', type: 'Question', items: [{ item: 'Answer 2.1', id: '1.1.1.1', type: 'Answer' }, { item: 'Answer 2.2', id: '1.1.1.2', type: 'Answer' }] }] }, { item: 'Answer 1', id: '1.2', type: 'Answer', items: [{ item: 'Question 3', id: '1.2.1', type: 'Question', items: [{ item: 'Answer 3.1', id: '1.2.1.1', type: 'Answer' }, { item: 'Answer 3.2', id: '1.2.1.2', type: 'Answer' }] }] }] },
result = [before].map(iter);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can achieve this using map, I wrote an simple test to show my point here
this is the important part of the code
function rename(item: any) {
return {
title: item.item,
key: item.id,
color: item.type === 'Question' ? 'red' : 'blue',
items: item.items?.map(rename)
}
}
console.log(items.map(rename))
Of course if you're using typescript, change any to the appropriate type and pay attention that I'm using ? operator which will not work with javascript, so you could do something like
...
items: item.items ? item.items.map(rename) : undefined
...

bootbox custom dialog with both radio and select inputs

I'm trying to understand if it's possible to place a select input on the right of a radio input in a custom bootbox dialog. Example:
bootbox.prompt({
title: "This is a prompt with a set of radio inputs!",
message: '<p>Please select an option below:</p>',
inputType: 'radio',
inputOptions: [
{
text: 'Choice One',
value: '1',
},
{
text: 'Choice Two',
value: '2',
},
{
text: 'Choice Three',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
This will show three radio items.
I want to place on the right of, say, 'Choice Two' a select:
inputType: 'select',
inputOptions: [
{
text: 'Choose one...',
value: '',
},
{
text: 'Choice One',
value: '1',
}]
But I don't understand if this is possible with bootbox.

Sencha touch Selectfield picker not showing correct selection

Store of the selectfield contains same word with different case like Ed & ed.When we select ed,In the picker it is showing Ed.
Code:
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField:'firstName',
valueField:'firstName',
store:Ext.create("Ext.data.Store", {
fields: [
{name: 'firstName', type: 'string'},
],
data : [
{firstName: "Ed"},
{firstName: "ed"},
{firstName: "Tommy"},
{firstName: "Aaron"},
{firstName: "Jamie"}
]
})
}
]
}
]
});
Fiddle for the problem
In Sencha, the selectfield is somethings whose value doesn't distinguish between the caps and small letter. So, it has provided valuefield. If you create your store like this below, you will get the expected result:
store: Ext.create("Ext.data.Store", {
fields: [{
name: 'firstName',
type: 'string'
}, {
name: 'value',
type: 'string'
}],
data: [{
firstName: "Ed",
value: 'edCaps'
}, {
firstName: "ed",
value: 'edSmall'
}, {
firstName: "Tommy",
value: 'tommy'
}, {
firstName: "Aaron",
value: 'aaron'
}, {
firstName: "Jamie",
value: 'jamie'
}]
})
Here is fiddle also. Happy coding! :)

Categories