I have a gridview in extjs4.2. i want to set allowBlank config for some columns of my grid in the edit mode. i do it in the columns of my grid like this:
gridColumn = [
{
xtype: 'gridcolumn',
dataIndex: 'name',
allowBlank: false
}, ...
]
but when the grid goes in edit mode, the update button of the grid is disabled even after entering valid data for the 'name' column.
gridcolumn does not have allowBlank config property. Configuration which editor use in editing mode you have to provide in grdicolumn editor config:
gridColumn = [
{
xtype: 'gridcolumn',
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, ...
]
Complete example of grid with configured row editing plugin you can find in Ext.grid.plugin.RowEditing class documentation.
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 want to have a checkbox (true/false) for my extjs grid.
When I try to add item of xtype : 'checkbox' I get an error :
Uncaught TypeError: column.isColumnHidden is not a function
I've seen on a a post that there is a plugin of checkbox column that needs to be downloaded and included in ExtJS , Isn't there a built in option in ExtJS 5 for checkbox in a grid ?
When I use checkbox, I download extjs library from official site and build develompent version of if via extjs console.
My extjs grid with checkbox was look like this:
{
xtype:'checkcolumn',
fieldLabel: 'checkbox_label',
name: 'checkbox_name',
text: 'text'
}
So full grid code will look like this:
{
xtype: 'grid',
frame: true,
title: 'Users',
collapsible: true,
height: 250,
bind: '{depGrid.selection.users}',
columns: [
{
text: 'Id',
dataIndex: 'id'
},
{
text: 'Name',
dataIndex: 'name'
},
{
xtype:'checkcolumn',
fieldLabel: 'checkbox_label',
name: 'checkbox_name',
text: 'text'
}
]
}
Also you cat try to add to checkbox dataIndex field and set to it some boolean variable from your model. Good luck!
Can we add combo box in grid header in extjs ?
we have a special requirement here, if anybody has idea then please let me know.
Thanks
Deepak
If you want it in the grid column header (for example to implement custom filters), look at http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid
Basically, you configure items in the column configuration and off you go:
Ext.define('KitchenSink.view.grid.BigData', {
extend: 'Ext.grid.Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'status',
text: 'Item status'
items: [
{xtype: 'combobox'}
]
}
]
});
You can use extjs tbar to implement components to grid header:
tbar: [
{ xtype: 'button', text: 'Button 1' }
]
or:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
to implement combobox, best way is to define custom combobox component and provide alias for it, then in your grid tbar just say xtype: 'mygridcombo'
Here is a example.
This works for me well
{
text : 'Save Energy Mode',
dataIndex: 'fs',
items: [{
xtype: 'combobox',
padding: 2,
flex: 1
}]
}
or simply (if you do not need title text)
columns: { items: [{ xtype: 'combobox'}] }
If you can have it in the grid panel's toolbar, then Davor's suggestion is the way to go. If you actually need it in the grid's header (e.g., like for filtering on columns), you might check out the Grid Filtering example in the Ext JS docs: http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html
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
},