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!
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'm trying to developp an Ext.grid.Panel using EXT JS.
My need is to have a column where the content is a button.
obviously some think like this will not work
this.columns = [
{
text : 'column1',
width : 120,
sortable : true,
flex: 1,
dataIndex: 'col1'
},{
xtype: 'button',
width : 120
}
//...
Also, I've tied some examples like this one but did not work for me.
Any leeds ?
Thanks in advance
Try using an actioncolumn (Extjs docs) like that:
{
xtype: 'actioncolumn',
width: 50,
items: [{
handler: function(grid) {
alert("works");
}
}]
}
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.
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 have the following code which works on all browsers except Firefox:
{
xtype: 'gridcolumn',
dataIndex: 'action',
flex: 1,
text: 'Action',
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Update','Update'],
['Suspend','Suspend'],
['Cancel','Cancel']
],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
change:{
scope: me,
fn: me.processAction
},
focus: function(combo) {
combo.expand();
},
collapse: function(combo) {
//combo.setVisible(false);
}
}
})
}
The problem is that when you click on the combo box, the first item in the list is <div id="ext-gen1584" class="x-grid-cell-inner " style="text-align: left; ;"> </div>.
Has anyone else encountered this? Is it a bug in Ext or in Firefox?
Currently testing in Firefox 18.0.2.
I had this bug, like the others said, it happens when you haven't dataIndex's field in model. But here's one little moment, that you HAVE to initialize that field in model, even by empty value, and then it will render correct.
Yes, < 5.0 versions have bug in firefox - when dataIndex have invalid name, editor got wrong value.
Just look example
header: 'Relationship',
dataIndex: 'relationshipWRONG', // rename this on 'relationship'
flex: 2,
getEditor: function() {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.ComboBox', {
store: relativeStore,
displayField: 'name',
valueField: 'name',
editable: false
})
});
}
Look at this in chrome and firefox, in firefox you see dom element instead null value. In 5 verion all is well.
Rename this dataindex and value will be correct.
But i seen this bug when dataIndex is correct on datacolumn, and i have not found how to resolve it and just changing value in beforestartedit event(ofc it's bad practise)
I have meet similar problem in grid,if the dataIndex have no value,then the cell will show what you have seen..so pls check the content of the dataIndex:Action;
Here is what I figured out today in my case...
In a scenario where you have
1 - a store with fields 'id', 'name', 'displayName' with a combo on displayName field.
in response to daixfnwpu: AND dataIndex is set for each field.
2 - a record to add with fields 'id', 'name' but NO displayName in it.
If you do a store.add(record), this seems to work and displayName will be set to an empty string ""
But if you drag-drop the record, the drop action does not seem to set the displayName and it stays undefined... This is a source of problems...
I fixed this by filtering the added records onDrop...
Ext.each(records, function(record) {
var displayName = record.get('displayName');
record.set('displayName', displayName ? displayName : '');
record.commit();
});