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();
});
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 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 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!
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.