Passing information to Ext.data.Model in Extjs

Question

I'm trying to edit an open source program (and learn Extjs meanwhile) and I encountered a problem about models. I don't want to put code here since it is too long but I can provide if necessary.

So I got a a class which extends Ext.form.Panel and model "PartModel" assigned to it. This model has a string field called "partNumber" along with many other fields.

In this panel I want to choose a part number from a combobox from predefined values at database and assign it to "partNumber".

The problem is I want to assign value that is "displayed" in the combobox.(Not one of store fields, I'm using a custom XTemplate for it)

How can I do it?

Edit: Adding combobox code. I thought adding "dataIndex: 'partNumber'" would be sufficient to do job but this code isn't working at all. I can see Part Numbers strings from combobox but when I choose one and hit save button it doesn't save. (There are many other fields working well with that save button maybe I just need to add another button to save part number?)

{
  xtype: 'combobox',
  dataIndex: 'partNumber',
  fieldLabel: "Part Number",
  labelWidth: 150,
  flex: 1,
  store:{
    xtype: 'store',
    autoLoad: true,
    model: 'PartGroupsClasses',
    proxy: getPartGC()},
  queryMode: 'local',
  renderTo:Ext.getBody(),
  tpl:Ext.create('Ext.XTemplate','<tpl for="."><div class="x-boundlist-item">{code}-{descr}-{ccode}-{cdescr}</div></tpl>'),
  displayTpl:Ext.create('Ext.XTemplate','<tpl for=".">{code}{descr}{ccode}{cdescr}</tpl>')
}

Edit2: Figured out save button is basically calling following function.

Ext.override(Ext.data.Model, {
    setDataWithAssociations: function(data) {
        for (var i in data) {
            if (this.fields.containsKey(i)) {
                this.set(i, data[i]);
            }
            if (this.associations.containsKey(i)) {
                var store = this[i]();
                store.add(data[i]);
            }
        }
    }
});

A combobox doesn't have a dataIndex. A column has a dataIndex, but I don't see a grid. Check out valueField and displayField. — Alexander
@Alexander yes sir you are right, changed dataIndex to valueField:'id' and added name:'partNumber'. Now it actually saves my partNumber value, but saves the Part Number table's id (which is valueField)... I tried valueField:this.getRawData() but crashed the program. I need displayField's value in valueField. Is this possible? — user3789570
instead of getRawData(), i meant getRawValue() but still didnt work — user3789570
@Alexander What I tried makes no sense since I need a field for valueField. Since I can't change the how program saves the values, changing my combobox model and adding it a display field might be a better choice.... But do I need to change my database and add a new column to it, in order to get a new field? — user3789570
So instead of using displayField: 'partNumber' you're using a tpl, and you want to set the partNumber model value to {code}{descr}{ccode}{cdescr}, right? — incutonez

incutonez incutonez · Accepted Answer · 2016-08-18T14:55:13

I would do something like this... in your combobox's model, add an extra field that makes use of the convert function to create your displayValue, and then in your combobox, just use that value for your displayValue property.

Model

Ext.define('MyComboModel', {
  extend: 'Ext.data.Model',
  fields: [
    {
      name: 'code',
      type: 'string'
    },
    {
      name: 'desc',
      type: 'string'
    },
    {
      name: 'ccode',
      type: 'string'
    },
    {
      name: 'cdesc',
      type: 'string'
    },
    {
      name: 'displayValue',
      type: 'string',
      convert: function(value, record) {
        return record.get('code') +
          record.get('desc') +
          record.get('ccode') +
          record.get('cdesc');
      }
    }
  ]
});

Combo

    xtype: 'combobox',
    name: 'Field2',
    valueField: 'displayValue',
    displayField: 'displayValue',
    fieldLabel: 'Field2',
    queryMode: 'local',

Full example.

Passing information to Ext.data.Model in Extjs

2 Answers

Store

Combo

Selector