I have an ExtJS 6.2.0.981 Modern application. I am trying to add a "textfield" into a grid cell but I get the following error:
column.getCell is not a function
Here is the fiddle
I checked the DOCS for the "widgetcell" component and it states:
This class is used for Ext.grid.Grid cells that contain a child Ext.Component or Ext.Widget. This cell type is typically used by specifying Ext.grid.column.Widget column type.
But Ext.grid.column.Widget seems to have been removed.
Place your widgetcell config into cell
columns: [{
text: "Column 1",
dataIndex: "COL1",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "textfield",
label: "Col 1 Widget"
}
}
}]
Related
I am using Ext JS 3.4 and in the composite field, there are three fields, code is as below:
xtype: 'compositefield',
name: 'comboField',
fieldLabel: 'Partner with',
width: 400,
cItems:[{
xtype: 'combo',
name: 'partnerTypeCombo',
value: 'ProviderName',
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['id', 'displayValue'],
data: [
['ProviderName', 'Provider Partner Name'],
['OtherProvider', 'Other Provider Partner']
]
}),
valueField: 'id',
displayField: 'displayValue',
listeners: {
scope: this,
select: function(combo, record, index) {
var providerField = this.formPanel.getForm().findField('comboField_providerPartnerNameField');
var otherProviderField = this.formPanel.getForm().findField('comboField_otherProviderPartnerNameField');
if (combo.value == "OtherProvider") {
providerField.setVisible(false);
otherProviderField.setVisible(true);
}
else {
providerField.setVisible(true);
otherProviderField.setVisible(false);
}
}
}
}, {
xtype: 'spacer',
width: 10,
flex: 0
}, {
xtype: 'modellinkfield',
name: 'providerPartnerNameField',
modelLevelType: 'Organization',
modelType: 'Organization',
pickerReport: {
reportName: 'TMS.SupplierVendorOrgPicker',
targetLevelType: 'Organization'
}
}, {
xtype: 'textfield',
name: 'otherProviderPartnerNameField',
hidden: true
}]
By using the above code and without hiding any field, I got the below result
But My expectation is
By default third field (which is text field) should be hidden
On selecting Combobox values, the next two fields should be visible/hidden.
Like if dropdown field value is "Provider Partner Name" then only second
field (modeling field) should be visible (shown as below)
And if dropdown field value is "Other Provider Name" then only third
field (i.e text field) should be visible.
But I am unable to achieve this third objective. I am getting the following output for this (the field is getting overridden)
And I am expecting the following output.
Looks like this may be some layout issue or maybe I need to apply some CSS style to handle this. Can someone please help me to solve this issue.
Able to solve this issue by using below code :
otherProviderField.ownerCt.doLayout();
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 problem with OpenLayers + GeoExt2: I created a FeatureStore which features (downloaded via an API) contain an id attribute. When I try to represent the features in a grid panel, all the other attributes are properly represented (name, description, etc.) but the id is somehow overridden by the OpenLayers object's id, for instance "OpenLayers_Feature_Vector_363", instead of the "original" int id.
My store is defined as follows:
areaStore = Ext.create('GeoExt.data.FeatureStore', {
layer: areaLayer,
fields: [
{type:'string', name: 'note'},
{type:'int', name: 'node' },
{type:'string', name: 'description'},
{type:'bool', name: 'enabled'},
{type:'int', name: 'id'}
],
autoLoad: false,
});
The columns that I put into my grid panel are defined as follows:
var areaColumns = [
{ dataIndex: 'id', header: 'ID', flex:1 },
{ dataIndex: 'description', flex: 1, header: 'Description' },
{ dataIndex: 'node', flex: 1, header: 'Node' },
{ dataIndex: 'enabled', flex: 1, header: 'Enabled'},
{ dataIndex: 'note', flex: 1, header: 'Note' }
]
Has anyone got the same problem when downloading features from a database via API?
Thank you!
Have you tried using
{type:'int', name: 'recordId', mapping:'id'}
and
{ dataIndex: 'recordId', header: 'ID', flex:1 },
to check whether the id is read correctly from the data?
Have you played around with idProperty config option of the store, i.e. set it to someNonExistentIdProp?
#Alexander: thank you for your answer, I tried right now with no luck, it actually seems like the id is undefined. That's odd, because all the other fields are read correctly and I'm sure the type of that field is integer.
[EDIT] Since I didn't get to find out why OpenLayers overwrites the properties' id and it happened before I could make any mapping to the original id attribute, I tried and managed to edit my GeoJSON format in order to add a recordId attribute to the features' properties and set it equal to the original id.
In other words I edited the downloaded JSON before it was parsed and added as a OpenLayers feature vector, I added the recordId attribute, then used this one instead of 'id'.
I hope my solution will help someone who is having the same problem!
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
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
},