PDA

View Full Version : How do I stop a clicked combo box from clearing its value????



cbmeeks
4 Oct 2011, 12:12 PM
This is driving me insane.

I have a GridPanel that has a combobox renderer. I am using a row editor.

The row has number boxes and when the user clicks the number box to change, the combo box goes blank. Why???? The user has to remember the last value in the combo box in order to click the Update button.

This is crazy. Other combo boxes (not in grids) don't behave this way.

Thanks.

EDIT
I have attached some screen shots to show the problem. The first represents the load of the grid. The second represents what it looks like when any part of the row is clicked and RowEditing is enabled.

2853428535

cbmeeks
5 Oct 2011, 7:08 AM
Never mind. Solved it myself.

lucasguaru
5 Oct 2011, 12:27 PM
I'm having the same problem.
Can you share your solution?

cbmeeks
6 Oct 2011, 4:05 AM
Yeah, what you have to do is make sure that in your combobox, make sure you specify the valuefield and displayfield along with the dataindex. Plus, you need to specify them in the column too. Here is my code that works:

Model:


//---------------------------------------------------------------------------------------------------------------------
// Parts Used (Materials)
//---------------------------------------------------------------------------------------------------------------------
Ext.define('modWorkOrdersPartsUsed', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'WorkOrderDetailKey',
name: 'WorkOrderDetailKey',
type: 'integer'
},
{
mapping: 'type',
name: 'type',
type: 'string'
},
{
mapping: 'workorderheader_id',
name: 'workorderheader_id',
type: 'integer'
},
{
mapping: 'quantity',
name: 'quantity',
type: 'number'
},
{
mapping: 'part_id',
name: 'part_id',
type: 'number'
},
{
mapping: 'partnumber',
name: 'partnumber',
type: 'string'
},
{
mapping: 'description',
name: 'description',
type: 'string'
},
{
mapping: 'eachprice',
name: 'eachprice',
type: 'number'
},
{
mapping: 'part_eachprice',
name: 'part_eachprice',
type: 'number'
},
{
mapping: 'linetotal',
name: 'linetotal',
type: 'number'
}
]
});

My grid (notice how I have to set some globals too):


Ext.define('grdWorkOrdersPartsUsed', {
extend: 'Ext.grid.Panel',

constructor: function(paConfig) {
Ext.apply(this, {
columns: [
{
dataIndex: 'quantity',
field: {
allowBlank: false,
minLengthText: '',
minValue: 1,
msgTarget: 'side',
preventMark: true,
selectOnFocus: true,
selectOnTab: true,
step: 1,
value: 1,
xtype: 'numberfield'
},
header: 'Qty',
width: 70
},
{
dataIndex: 'partnumber',
editor: self.cmbParts,
field: {
allowBlank: false,
autoRender: false,
autoSelect: false,
autoShow: false,
dataIndex: 'partnumber',
displayField: 'display',
editable: true,
emptyText: 'Select a part',
enableKeyEvents: true,
forceSelection: true,
listClass: 'x-combo-list-small',
listeners: {
select: function(combo, records, opts) {
window.eachprice = records[0].data.eachprice;
}
},
listWidth: 500,
msgTarget: 'side',
preventMark: true,
queryMode: 'local',
readOnly: false,
selectOnFocus: false,
selectOnTab: false,
store: stoPartsDropDown,
title: 'Select a part',
typeAhead: true,
typeAheadDelay: 100,
triggerAction: 'all',
valueField: 'partnumber',
xtype: 'combobox'
},
header: 'Part Number',
width: 280
},
{
align: 'side',
blankText: '',
dataIndex: 'eachprice',
field: {
allowBlank: true,
minValue: 0,
preventMark: true,
readOnly: true,
xtype: 'numberfield'
},
header: 'Price',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('quantity') * value);
},
width: 100
}

],
listeners: {
edit: function(editor, e) {
var part_pos = Ext.StoreManager.get('stoPartsDropDown').find('partnumber', editor.record.get('partnumber'));
var part = Ext.StoreManager.get('stoPartsDropDown').getAt(part_pos);
editor.record.set('part_id', part.data.part_id);
editor.record.set('eachprice', window.eachprice);
editor.record.set('linetotal', window.eachprice * editor.record.get('quantity'));
liveUpdate();
},
itemdblclick: function(view, record, item, index, event) {
if(workorders != null) {
// workorders.workordersMaint.openPartsPopup(record);
}
},
scope: this
},
plugins: [materialsRowEditing],
selType: 'rowmodel',
store: stoWorkOrdersPartsUsed,
title: 'Parts Used'
});

grdWorkOrdersPartsUsed.superclass.constructor.call(this, paConfig);
}



});

arshad3641
22 Feb 2017, 10:26 PM
Yeah, what you have to do is make sure that in your combobox, make sure you specify the valuefield and displayfield along with the dataindex. Plus, you need to specify them in the column too. Here is my code that works:

Model:


//---------------------------------------------------------------------------------------------------------------------
// Parts Used (Materials)
//---------------------------------------------------------------------------------------------------------------------
Ext.define('modWorkOrdersPartsUsed', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'WorkOrderDetailKey',
name: 'WorkOrderDetailKey',
type: 'integer'
},
{
mapping: 'type',
name: 'type',
type: 'string'
},
{
mapping: 'workorderheader_id',
name: 'workorderheader_id',
type: 'integer'
},
{
mapping: 'quantity',
name: 'quantity',
type: 'number'
},
{
mapping: 'part_id',
name: 'part_id',
type: 'number'
},
{
mapping: 'partnumber',
name: 'partnumber',
type: 'string'
},
{
mapping: 'description',
name: 'description',
type: 'string'
},
{
mapping: 'eachprice',
name: 'eachprice',
type: 'number'
},
{
mapping: 'part_eachprice',
name: 'part_eachprice',
type: 'number'
},
{
mapping: 'linetotal',
name: 'linetotal',
type: 'number'
}
]
});

My grid (notice how I have to set some globals too):


Ext.define('grdWorkOrdersPartsUsed', {
extend: 'Ext.grid.Panel',

constructor: function(paConfig) {
Ext.apply(this, {
columns: [
{
dataIndex: 'quantity',
field: {
allowBlank: false,
minLengthText: '',
minValue: 1,
msgTarget: 'side',
preventMark: true,
selectOnFocus: true,
selectOnTab: true,
step: 1,
value: 1,
xtype: 'numberfield'
},
header: 'Qty',
width: 70
},
{
dataIndex: 'partnumber',
editor: self.cmbParts,
field: {
allowBlank: false,
autoRender: false,
autoSelect: false,
autoShow: false,
dataIndex: 'partnumber',
displayField: 'display',
editable: true,
emptyText: 'Select a part',
enableKeyEvents: true,
forceSelection: true,
listClass: 'x-combo-list-small',
listeners: {
select: function(combo, records, opts) {
window.eachprice = records[0].data.eachprice;
}
},
listWidth: 500,
msgTarget: 'side',
preventMark: true,
queryMode: 'local',
readOnly: false,
selectOnFocus: false,
selectOnTab: false,
store: stoPartsDropDown,
title: 'Select a part',
typeAhead: true,
typeAheadDelay: 100,
triggerAction: 'all',
valueField: 'partnumber',
xtype: 'combobox'
},
header: 'Part Number',
width: 280
},
{
align: 'side',
blankText: '',
dataIndex: 'eachprice',
field: {
allowBlank: true,
minValue: 0,
preventMark: true,
readOnly: true,
xtype: 'numberfield'
},
header: 'Price',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('quantity') * value);
},
width: 100
}

],
listeners: {
edit: function(editor, e) {
var part_pos = Ext.StoreManager.get('stoPartsDropDown').find('partnumber', editor.record.get('partnumber'));
var part = Ext.StoreManager.get('stoPartsDropDown').getAt(part_pos);
editor.record.set('part_id', part.data.part_id);
editor.record.set('eachprice', window.eachprice);
editor.record.set('linetotal', window.eachprice * editor.record.get('quantity'));
liveUpdate();
},
itemdblclick: function(view, record, item, index, event) {
if(workorders != null) {
// workorders.workordersMaint.openPartsPopup(record);
}
},
scope: this
},
plugins: [materialsRowEditing],
selType: 'rowmodel',
store: stoWorkOrdersPartsUsed,
title: 'Parts Used'
});

grdWorkOrdersPartsUsed.superclass.constructor.call(this, paConfig);
}



});




Hai,what If the combobox is loading remotely, Can you try in a fiddle for me.|
thanks in advance