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.
Related
I have a requirement to display combobox and datefield in Grid columns. So used widgetcolumn and created grid with those fields.
But now on changing data in combobox or datefield, new values should be updated in grid store so that after going to next page and coming back, values should persist in previous pages.
Can someone let me know how I can achieve this?
Fiddle: https://fiddle.sencha.com/#fiddle/183r
Option1: Use both widget and cell editor.
Add CellEditing plugin and set editor to same component as widget.
{ xtype: 'widgetcolumn', text: 'Gender', dataIndex: 'gender', flex: 1,
widget: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'},
editor: { xtype: 'combo', store: genderStore, displayField: 'name', valueField: 'value'}
},
Example: https://fiddle.sencha.com/#fiddle/1843
Option2: Manually update the record.
I feel this solution is better.
widget: {xtype: 'datefield',
listeners:{
select: function(datefield, value, eOpts){
var rowIndex = datefield.up('gridview').indexOf(datefield.el.up('table'));
var record = datefield.up('gridview').getStore().getAt(rowIndex);
record.set('dob', value);
}
}
}
Example: https://fiddle.sencha.com/#fiddle/1842
To get rowIndex in widgetColumn, I referenced "How to get rowIndex in extjs widget column" DrakeES's answer.
The best solution i could find.
The function "getWidgetRecord" is not findable with the search.
It is discribed within the widget config description.
Have a look at the following Links.
https://docs.sencha.com/extjs/5.1.3/api/Ext.grid.column.Widget.html#cfg-widget
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.column.Widget.html#cfg-widget
A config object containing an xtype.
This is used to create the widgets or components which are rendered into the cells of this column.
This column's dataIndex is used to update the widget/component's defaultBindProperty.
The widget will be decorated with 2 methods: getWidgetRecord - Returns
the Ext.data.Model the widget is associated with. getWidgetColumn -
Returns the Ext.grid.column.Widget the widget was associated with.
widget:{
xtype:'combo',
editable: false,
store: Ext.create('Ext.data.Store',{
fields:['name','text'],
data:[
{"name":"integer", "text":"Integer"},
{"name":"float","text":"Float"}
]
}),
listeners:{
select: function(combo, value, eOpts){
var record = combo.getWidgetRecord();
record.set('type', value.get('name'));
}
},
valueField:'name',
displayField:'text',
allowBlank: false
}
or
widget: {
xtype: 'textfield',
allowBlank: false,
listeners:{
change: function(textfield, value, eOpts){
var record = textfield.getWidgetRecord();
record.set('field', value);
}
}
}
I have a renderer set up on my Sencha Ext.JS 3.4 EditorGridPanel. I allow the user to click a button, add rows and fill in various cells in those rows, and I set up a cue banner to show some useful text as soon as a blank row is added.
My cue banner solution is based on another SO answer, and the solution works great except for one small caveat: when someone types in text in one of the cells and later reverts that text to blank, whatever was there before is kept instead of becoming blank. You can edit to your heart's content, but as soon as you try to delete all text in a cell, your changes are ignored.
I've looked through the Sencha docs on the renderer and the onblur and even the listener parameters, and I've tried trapping the onblur event, but no events seem to even fire (using Chrome developer tools breakpoints). Is there a way to get this to work so that someone can revert the text to blank once they've typed?
Some Relevant Code:
(per comment request)
function renderCueBanner( value, metaData, record, rowIndex, colIndex, store ) {
if( !value && record.phantom )
return 'Double-click, and type';
else
return value;
}
//other code
MyCompany.ui.grid.Macros = Ext.extend(Ext.grid.EditorGridPanel, {
title: 'Macros',
//other code
var config = {
stripeRows: true,
viewConfig: { emptyText: 'No Macros to display' },
loadMask: true,
store: store,
sm: sm,
tbar: tbar,
colModel: new Ext.grid.ColumnModel({
defaults: {
menuDisabled: true
},
columns: [sm, {
header: 'Macro Category',
dataIndex: 'group',
sortable: true,
editor: {
fieldLabel: 'Macro Category',
forceSelection: false,
typeAhead: false,
valueField: 'name',
xtype : 'MyCompany.ui.autocompleter.MacroGroup'
},
renderer : renderCueBanner,
width: 150
}, {
header: 'To',
dataIndex: 'to',
editor: {
xtype: 'textfield',
allowBlank: false
},
sortable: true,
renderer : renderCueBanner,
width: 400
}],
listeners: {
'onblur' : {
fn: renderCueBanner,
handler: renderCueBanner,
delay: 100
}
},
isCellEditable: function(col, row) {
if (!Lynx.userCan('write')) {
Ext.Msg.alert(
'Access Denied',
'You are a read only user'
);
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
}),
//...other code...
};
The problem is most likely caused by allowBlank:false in combination with the default value of revertInvalid:true.
The behavior is as expected in fact: You do not allow the field to stay blank so the editor reverts to the last valid, non-blank value.
Try to add revertInvalid:false or remove allowBlank:false (preferred) and it should work.
When I make a grid like this:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
selType: 'checkboxmodel',
selModel: {
injectCheckbox: 1,
mode: 'SIMPLE'
},
viewConfig: {
plugins: [
{ ptype: 'gridviewdragdrop' }
]
},
})
I don't want the checkboxes checked when dragging because:
I only want to drag one item at a time,
I want to be able to multiselect for other actions.
I can add a listener to deselectAll after the drop but:
This leaves the item selected if I start to drag but change my mind and
This means I cannot stop multiple items dragging.
Sound to me like you should be using the grids default selection model with a the ux 'checkcolumn' that is provided with the extjs library. This would let you be able to select rows for reorder independent of a checkbox selection of the row.
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
},
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.