1. #1
    Sencha User cbmeeks's Avatar
    Join Date
    Feb 2008
    Posts
    19
    Vote Rating
    0
    Answers
    1
    cbmeeks is on a distinguished road

      0  

    Exclamation Answered: How do I stop a clicked combo box from clearing its value????

    Answered: How do I stop a clicked combo box from clearing its value????


    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.

    shot1.pngshot2.png
    Last edited by cbmeeks; 5 Oct 2011 at 7:00 AM. Reason: Screenshots

  2. 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:

    Code:
    //---------------------------------------------------------------------------------------------------------------------
    // 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):

    Code:
    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);
       }
    
    
    
    });

  3. #2
    Sencha User cbmeeks's Avatar
    Join Date
    Feb 2008
    Posts
    19
    Vote Rating
    0
    Answers
    1
    cbmeeks is on a distinguished road

      0  

    Default


    Never mind. Solved it myself.

  4. #3
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guaruj√°, Brazil
    Posts
    77
    Vote Rating
    2
    Answers
    9
    lucasguaru is on a distinguished road

      0  

    Default


    I'm having the same problem.
    Can you share your solution?

  5. #4
    Sencha User cbmeeks's Avatar
    Join Date
    Feb 2008
    Posts
    19
    Vote Rating
    0
    Answers
    1
    cbmeeks is on a distinguished road

      0  

    Default


    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:

    Code:
    //---------------------------------------------------------------------------------------------------------------------
    // 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):

    Code:
    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);
       }
    
    
    
    });

Thread Participants: 1

Tags for this Thread