columns: [{
dataIndex: 'threshold',
align: 'center',
bind: '{changedThreshold}',
renderer: function(value) {
return Ext.String.format('<b>{0}%</b>', value);
},
}, {
xtype: 'widgetcolumn',
align: 'left',
dataIndex: 'threshold',
widget: {
xtype: 'sliderfield',
itemId: 'sliderThreshold',
minValue: 0,
maxValue: 100,
tipText: function(thumb) {
return Ext.String.format('<b>{0}%</b>', thumb.value);
}
}
}]
Problem is –
When I move the slider to change the value it shows the new value at the header(highlighted in the image). Instead I want it to reflect in the corresponding column (e.g. 60% should change
enter image description here
You must add change listeners and change record threshold field for that changes are visible because first column bind to store record
fiddle
Related
Please refer to the image shown below. (The highlighted part is the ROW header that I need in AG-Grid)
I am not sure about the functional use case of this first column for you.
Nevertheless you can achieve this by adding it to column definition as shown below.
var gridOptions = {
// define grid columns
columnDefs: [
// using default ColDef
{
headerName: ' ',
field: '__',
width: 15,
sortable: false,
cellStyle: {
// you can use either came case or dashes, the grid converts to whats needed
backgroundColor: 'lightgrey', // whatever cell color you want
},
},
...
}
Created working sample plnkr here.
As far as I know ag-grid doesn't have any built-in support for row headers, but as a workaround you can make your first column appear as row headers. I recommend making the whole column look a little different compared to the other columns (including the column header if it's not blank) so it can clearly be seen they are column headers, not standard row data.
Example column definitions:
ColumnDefs: [
{ headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
backgroundColor: 'AliceBlue', //make light blue
fontWeight: 'bold' //and bold
}
},
{ headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
{ headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]
You can also style in SCSS as shown here with the upper left cell:
::ng-deep .ag-header-cell.upperLeftCell {
background-color: aliceblue;
font-weight: bold;
}
In your data rows: you have to enter in the first column the title you want for each row.
Add this as your first colDef. It will render a index column that is unmovable. I have a separate IndexColumnCellRender so won't look exact the same, fill in cellStyle to fit your needs, or make a dedicated cell render like me.
const rowIndexColumn: ColDef = {
valueGetter: ({ node }) => {
const rowIndex = node?.rowIndex;
return rowIndex == null ? "" : rowIndex + 1;
},
width: columnWidth,
headerName: "",
colId: "some-id",
field: "some-id",
suppressNavigable: true,
suppressPaste: true,
suppressMovable: true,
suppressAutoSize: true,
suppressMenu: true,
lockPosition: true,
cellStyle: { padding: 0 },
};
I create 3 numberfields in a form:
{
xtype: 'numberfield',
fieldLabel: 'Inhuur',
name: 'inhuurPrijs',
inputId: 'inhuurPrijs',
emptyText: '0'
},
{
xtype: 'numberfield',
fieldLabel: 'Marge %',
inputId: 'inhuurMarge',
emptyText: '0',
maxValue: 100,
minValue: -100
},
{
xtype: 'numberfield',
fieldLabel: 'Verhuur',
inputId: 'verhuurPrijs',
emptyText: '0'
},
In field 'inhuurPrijs' i fill in a number. For example 100. Based on the field 'inhuurMarge' i want to make the price in 'verhuurPrijs'. inhuurMarge is a percentage field. So when the user choose the value '10' the 'verhuurPrijs' should be 110.
I tried listeners but those aren't working. And to make it even more complicated.....if i fill in 'inhuurPrijs' & 'verhuurPrijs' i want to calculate the percentage between them and place that in 'inhuurMarge'
Is this possible in a form?
You can use listeners, attach them to the fields to detect when changes are made and run your calculation and update the total.
Fiddle
Here is the code in case the above link breaks:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,
defaults: {
xtype: 'numberfield',
listeners: {
change: function(field, newVal, oldVal) {
console.log("Calculating");
var amount = Ext.getCmp('fieldAmount').getValue();
var markup = Ext.getCmp('feildMarkup').getValue();
var total = Ext.getCmp('fieldTotal');
if (amount > 0 && markup > 0) {
total.setValue(
amount + ((markup/amount) * 100)
);
}
}
}
},
items: [{
fieldLabel: 'amount',
name: 'amount',
id: 'fieldAmount'
}, {
fieldLabel: 'markup',
name: 'markup',
id: 'feildMarkup'
}, {
fieldLabel: 'total',
name: 'total',
id: 'fieldTotal'
}]
});
}
});
Note: You should probably disable the total / calculated field so that it cannot be manually edited.
Another solution I've implemented, is to add listeners on update/datachanged event of the store and not on the form fields, in this way all the magic happens even if you change data somewhere else, even from console, not only that particular form.
myStore.on('update', function(store, rec, op, fields, details, eOpts){
// run this only if desired fields have changed
if (fields && fields.some(function(item){
return /^amount/.test(item); // if field name starts with 'amount'
//return ['field_1', 'or_field_2', 'percentage_3'].indexOf(item) >= 0; // validation based on custom names, of course that still can be done using RegEx
})
) {
// custom number round function, see bellow why
var total = Ext.Number.round(rec.get('amount_one') * rec.get('amount_two') / 100);
rec.set('total', total);
}
});
I have the total field in my Model, and retrieve it's default value from the server (if you want), but I'm setting persist: false on it, in order not to send it back to the server.
Regarding custom number round method, I've discovered hard way that JavaScript rounding methods are not quite precise, meaning:
Number((1.005).toFixed(2)); // 1 instead of 1.01
Math.round(1.005*100)/100; // 1 instead of 1.01
Jack Moore built a custom function which seems to correct this which I've implemented in Ext.Number class, so all the credits for this goes to him: http://www.jacklmoore.com/notes/rounding-in-javascript/
function round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}
Another improvement is that it's using direct record access (or even associated data if needed), and not ComponentQuery which isn't so performant.
Lately I'm avoiding Ext.getCmp() as much as possible, but if I need to address components in the view (or event parent views) I'm using this.getView().lookupReference() or selectors like .up() or .down() instead.
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.
I have a grid with two checkcolumns and a text field
{
xtype: 'checkcolumn',
id: 'apprId',
text: '<b>Approve</b>',
width: 100,
dataIndex: 'aprvInd'
},
{
xtype: 'checkcolumn',
id: 'declId',
text: '<b>Decline</b>',
width: 100,
dataIndex: 'declInd'
},
{
id: 'declResnId',
header: '<b>Decline Reasons</b>',
dataIndex: 'declineReason',
align: 'center',
width: 200,
editor: new Ext.form.TextField({
maxLength: 100000
}),
}
if my grid has three rows, first row 'approve' checkbox checked, second row 'decline' checkbox checked and third row nothing checked.
on click of save button, i am doing a rest call and i m passing the data to db, and on success call back , i m reloading grid.
After reloading, the rows which have approve/decline checked should be disabled along with the 'declineReasons' text field.
How can i do this?
If you want to grey out the row I would look at the metaData parameter of the renderer config. Probably the trCls is referenced there.
To disable a checkbox I also would look at the renderer.
To disable the editor plugin look at the beforeedit event.
In my app users can add/remove as many series they want to the HighStock component using a piece of UI I wrote. However, when a user adds multiple time-series and the legend is under the chart, it shrinks the chart's height (in favor of the legend). This way the overall height remains constant.
However, I'm interested in having the plotting area keeping the same height and still have the legend be under it, changing the overall height if needed.
code
Here's a fiddle to demo the issue.
Ideas?
set maxHeight property. this will fix the maximum height of legend and gives navigation to legend.
maxHeight: 100,
here is the fiddle http://jsfiddle.net/9vZ8F/2/
instead if you remove
layout:'vertical'
legend will not occupy much space
here is a fiddle for it http://jsfiddle.net/9vZ8F/1/
Hope this is useful to you.
How about doing a calculation on the number of series you have and adjusting the chart height based on that?
var series = [{
name: 'series 1',
data: usdeur
}, {
name: 'series 2',
data: usdeur
}, {
name: 'series 3',
data: usdeur
}, {
name: 'series 4',
data: usdeur
}, {
name: 'series 5',
data: usdeur
}
],
height = 400 + (series.length * 15);
$('#container').highcharts('StockChart', {
chart: {
borderWidth: 2,
height: height
},
legend: {
enabled: true,
layout: 'vertical'
},
navigator: {
//top: 200
},
rangeSelector: {
selected: 1
},
series: series
});
http://jsfiddle.net/SSn4e/