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
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.
I have an ExtJS 4.2.1 form with a combobox.
xtype: 'container',
width: 360,
items: [{
xtype: 'combobox',
fieldLabel: 'Shift Code',
name: 'ShiftCode',
store: Ext.create('SoftHuman.store.catalog.ShiftCode'),
blankText: ' ',
allowBlank: false,
displayField: 'Description',
valueField: 'ShiftCode'
}]
The combo when I click on the trigger icon It will get the data from the store and then show the items, as show in the following image.
What I want to do is to set a value and display value in the combo when I load my form and then if the user clicks to expand the combo the store will get the items remotly like it does right now.
This is because I have this form with 25 combos and I don't want to load all them be before I show the form and then assign each combo value because the user won't change all combos values, maybe he will just change 2 or 3, so it doesn't make sense to load them all initially but I want to show the display value in the combo from my record.
Any clue?
You can insert the default value in store and set it a value
combo.getStore().insert(0, { "valueField": 0, "DisplayField": "All Properties" }, true);
combo.setValue(0);
What you are missing is the
queryMode: 'remote':
From the sencha docs
In queryMode: 'remote', the ComboBox loads its Store dynamically based upon user interaction.
This is typically used for "autocomplete" type inputs, and after the user finishes typing, the Store is loaded.
A parameter containing the typed string is sent in the load request. The default parameter name for the input string is query, but this can be configured using the queryParam config.
In queryMode: 'remote', the Store may be configured with remoteFilter: true, and further filters may be programatically added to the Store which are then passed with every load request which allows the server to further refine the returned dataset.
You can also use queryDelay if you want too.
Here's an example I pulled from my code.
{
xtype: 'combo',
itemId: 'totalSearchCombo',
width: 200,
emptyText: 'Total Search',
typeAhead: true,
editable: true,
hideLabel: true,
hideTrigger: true,
store: 'dropDownList_s',
mode:'remote',
displayField: 'display_nm',
anchor: '100%',
matchFieldWidth: false,
listConfig:
{
width: 195,
loadingText: 'Searching...',
emptyText: 'No matching items found, or not enough characters entered.',
getInnerTpl: function () {
var tpl = '<div>{display_nm}</div>';
return tpl;
}
},
//pageSize: 15,
listeners: {
}
}
The solution was to set the following methods:
combo.setValue('here the value');
combo.setRawValue('here the value to display');
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();
});
I want to create an application where the combo box should look like first image below. But when I use a list for the combo box it comes out looking like the second image. The list is not fully shown - it is getting cut. Please suggest me which property to use? The code is as below:
items: [{
xtype: 'combobox',
fieldLabel: 'Location',
displayField: 'name',
forceSelection: true,
pageSize: 10,
store: 'SalesOrderManager.store.LocationStore',
typeAhead: true,
valueField: 'id',
id: 'LocationComboBox'
}]
What it should look like:
What I'm getting instead:
The full code can be viewed in this Fiddle.
Are you talking about the picker width? I think you want:
matchFieldWidth: false,
listConfig: {
width: 250
}