I am using Ext Js 4.1, and I need to put a comboBox in a grid cell to user choose the parameter that gonna be saved, however the available parameters coming from a store, but it does not working, I am already using editing plugin, as specified in docs, can anyone provide a insight ??
storeParameter = Ext.create('ParameterStore');
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
field: {
type: 'textfield'
},
editor: {
xtype: 'combo',
store: storeParameter
}
},
you should define the editor parameter on the grid cell where you want it to appear. Seems like you are trying to defining the editor in the store itself.
I solved the problem. I needed to add the attribute in grid:
selType: 'cellmodel',
And instead of to put a store directly, I replaced for comboBox, which has the store.
var comboParameter = Ext.create('ComboBoxParameter');
And the column replace to:
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
editor: comboParameter
},
Related
I have an ExtJS 6.2 modern app. What is the proper way to add a button to a grid cell?
I tried using the column renderer fn to return a button but I just see the HTML tags rendered, not the actual element. I also tried using the "widgetcell" component which does render the button but not the button text.
Fiddle.
Using your fiddle as an example, you can make a widget button like this
columns: [
//other columns
{
dataIndex: 'description',
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "button",
}
}
}
]
You can do it without widgetcell by:
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: 'button',
text: 'CLICK ME'
}
}
Or with panel
{
text: "Button Widget ",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: 'panel',
header: false,
items: [{
xtype: 'button',
text: 'CLICK ME'
}]
}
}
}
I wanted to accomplish the same task but thought I would include a little more complete example. This was the first resource I came across so figured I should post here.
So for my problem I just wanted to pass the data and render a view utilizing that data.To do that I add a column to my grid and added a widgetcell inside that column. The grid column requires a dataIndex but my button wasn't associated with a specific column in my model, so I just added a non-existent column for the required value which worked.
After that you can specify a widget object as a cell config. You can add a handler key and access the record object from the grid like below.
{
xtype: 'gridcolumn',
flex: 1,
width: 80,
dataIndex: 'button',
text: 'Details',
cell: {
xtype: 'widgetcell',
widget: {
xtype: 'button',
text: 'View',
width: '100%',
handler: function(button,e){
let accountData = this.up().up()._record.data
console.log(accountData);}
}
}
}
I have a grid with two columns. One is a select and the other is a widget. When I select something in the select I would like for the widget in the next cell to be clicked(and open a popup). I have looked but don't get how to get around in the grid.
This is select column.
{
text: Visionera.util.MessageHelper.getMessage('ext.accountSettings.editCompanyCustomFields.customFieldType'),
xtype: 'grid.column.combocolumn',
dataIndex: 'customFieldTypeId',
flex: 2,
editable: true,
store: Ext.create('Visionera.store.combo.IssueCustomFieldTypesStore'),
editorSelectListener: function(combo, record, eOpts){
var itemRecord = combo.up('editor').context.record;
do something...
}
},
and this is the next column if it matters.
{
text: 'value',
sortable: false,
hideable: false,
dataIndex: 'typeAndValueList',
xtype: 'widgetcolumn',
flex: 1,
menuDisabled: true,
widget: {
xtype: 'flexiselectwidget',
editable: true,
selectorEmptyText: '',
faIconForValue: 'fa-edit',
contentXType: 'customfieldcontentpanel',
listeners: {
select: 'onCustomFieldValueSelected',
scope: 'controller'
}
}
},
There are some custom stuff in there but I hope this doesn't matter for this question. The editorSelectListener does get triggered.
And I just want this to create a clikc in the next cell.
Get the reference of the grid using combo.up('grid').
Then use the down() method to select the column. Then use the fireEvent method to trigger the event programmatically and pass the required parameters.
I'm trying to edit the Gridpanel with the combobox items.
When I try selecting a value to edit and click on the other cell the value field appears in the cell as seen in the image attached, I want to display the description of the items and keep the valueField hidden from appearing . How would I be able to show the description always and edit,update the panel. knowing that I can update the data with the id(valueField which is appearing in the second part of image) only.
please help. thanks in advance.
Small piece of that grid
{
header: 'Field Time Distrib',
xtype: 'gridcolumn',
dataIndex: 'feild_distributor',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "distribsrcid",
queryMode: 'local',
mapperId: 'getfeildDistrib',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('timegrid[itemId=feilddTimeGrid]').getSeletion().selection.record.data.fieldname.trim();
this.store.clearFilter();
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}
One solution I can suggest you , Use renderer function of column identify if it is number ,If number get the respective name from the store and return the name ... check my fiddle. check the fiddle for my example
I have a grid that has an associated JsonStore and everything is populating great. I want to create in a column something like this:
I am very new to Ext, but this is what I have so far in my ColumnModel:
{
header: 'Sales Rep',
width: 150,
sortable: true,
dataIndex: 'salesrep'
},
{
header: 'graph',
width: 150,
sortable: true,
dataIndex: 'ytd',
renderer: function(value, metaData, record, rowIndex, colIndex, store){
var colChart = new Ext.chart.ColumnChart({
store: store,
xField: 'ytd',
yField: 'salesrep'
});
}
},
{
header: 'Year to Date',
width: 150,
sortable: true,
dataIndex: 'ytd'
},
The first and third column work as expected, but I am not seeing anything in the second. Anyone done anything like this?
Using column renderer you are able to affect rendering via metadata object.
Unfortunately, it allows changing html attributes and css classes only.
Therefore either you need to try using css styles for chart generation or search for other ways possible, like creating ad hoc columns.
In extjs, if I have a grid definition like this:
xtype: 'grid',
store: 'someStore',
flex: 1,
frame: true,
loadMask: true,
titleCollapse: true,
cls: 'vline-on',
ref: '../someGrid',
id: 'someGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'ID',
dataIndex: 'someID',
sortable: true,
width: 100
}
Is there a way to apply some formatting to this column? For example, this field is a number and if i wish to set a decimal precision..can I do it? Or do I need to apply formatting when the store is being loaded in my java file?
My guess is the latter??
Use "renderer" option. You can define you function there. For example i want to show someID wrapped in some tag:
columns: [
{
xtype: 'gridcolumn',
header: 'ID',
dataIndex: 'someID',
sortable: true,
width: 100,
renderer: function(value) {
// your logic here
return "<b>" + value + "</b>";
}
}
If you want to show decimal precision inside a grid column you should define the dataindex in your store of "float" type:
...
, {name: 'column_data_name', type: 'float'}
...
Then inside the grid column definition you should specify a renderer, as suggested by KomarSerjio, and use it.
function floatRenderer(value) {
if (value) {
var val = value.toFixed(2);
return addSeparatorsNF(val, '.', ',', '.');
}
else return "";
}
...
, { id:'column_data_name', header: 'label', dataIndex: 'column_data_name' , renderer: floatRenderer , align: 'right' }
...
The function addSeparatorsNF has been suggested here.
For formatting your grid decimal value to restrict after point to two number or till you want simply use below code to your column :
renderer: Ext.util.Format.numberRenderer('00.00')
I tried the renderer config KomarSerjio suggested and it worked brilliantly for me when using Sencha Ext JS 6. I used it to zero fill some time data I was receiving which was missing the prefix zero to make it a 24 hour time. So I tried the following and it worked great! Thank you.
Ext.define('ViewLL.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
reference: 'mainList',
flex: 1,
requires: [
'ViewLL.store.Datastore'
],
title: 'Records',
store: {
type: 'datastore'
},
columns:
{ text:'Pln On Site Time',
dataIndex:'plnOnSiteTime',
renderer: function (number) {
if (number<=2400) { number = ("000"+number).slice(-4); }
return number;
}
}
});
Prior to renderer config my grid was displaying values e.g. 926, 800, 1000.
Post adding function via renderer config my grid displayed values e.g. 0926, 0800, 1000