How to insert several Model instances (array) inside a combobox in Ext JS

Question

I barely know something regarding ExtJS and I'm struggling a lot since some days ago. I know code presented here might not be the most performatic one, but it's a legacy application that I had to perform support (I did not develop it from scratch).

These below are called to populate a ExtJS combobox - carregaComboVersao makes a get call to server in order to obtain a response. carregaVAloresCombo parses the response in order to populate combobox.

me.comboVersao is my combobox component, defined in this same javascript file as:

me.comboVersao = me.down('combobox[name=idVersao]');


carregaComboVersao: function(idObra){

       var me = this;


          KLIFT.model.mOrcamentoVersao.load(0, {
            url: '../orcamentoVersao/buscaVersoesOrcamentoPorObra',
            params: {
                idObra: idObra
            },

            success: function(record){
                alert(JSON.stringify(record));
                me.carregaValoresCombo(record);
                me.setLoading(false);
            }

        });



    },

carregaValoresCombo: function(record){
        var novo = JSON.stringify(record);
        var me = this;

         if (novo !== null) {

                var item = record["raw"]["data"];

                var array = new Array();
                for(i=0; i<item.length; i++){

                obj = Ext.create('KLIFT.model.mOrcamentoVersao', {
                    id : item[i].id,
                    dthrCriacao  : item[i].dthrCriacao,
                    descritivoVersao: item[i].descritivoVersao,
                    versao: item[i].versao
                    });

                 }

                  me.comboVersao.setValue(obj);       
        }

---

Here is the combobox defined in a form component:

{ xtype: 'combobox', fieldLabel: 'Versão', displayField: 'descritivoVersao', valueField: 'descritivoVersao', width: 300, name: 'idVersao', editable:false, model: Ext.create(('KLIFT.model.mOrcamentoVersao'))

}

---

and here is the model:

Ext.define('KLIFT.model.mOrcamentoVersao', { extend: 'Ext.data.Model',

fields: [
     {name: 'versao', type: 'int'},
     {name: 'dthrCriacao', type: 'datetime'},
     {name: 'descritivoVersao', type: 'string'},
     {name: 'id', type: 'int'}

]

} );

Any help is welcome.

Just an addition - response from server comes into 'record' variable as:

{"raw":{"data":[{"id":1,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais veia","versao":0},{"id":2,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais intermediaria","versao":1},{"id":3,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais NOVA","versao":2}]},"modified":{},"data":{"versao":0,"dthrCriacao":"","descritivoVersao":"","id":0},"hasListeners":{},"events":{},"stores":[],"phantom":false,"internalId":0,"id":"KLIFT.model.mOrcamentoVersao-ext-record-2","dirty":true}

Answer 1

For pushing multiple values in combobox list, use store and map the store to the combobox.Mention the model in the store definition.

var store = Ext.create('Ext.data.Store', {
  model: 'KLIFT.model.mOrcamentoVersao',
});

Add the multiple model instances to the store, which in turn will be added to the combobox.

comboVersao.getStore().add(obj);

For Example:

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('KLIFT.model.mOrcamentoVersao', {
      extend: 'Ext.data.Model',

      fields: [{
          name: 'versao',
          type: 'int'
        },
        {
          name: 'dthrCriacao',
          type: 'datetime'
        },
        {
          name: 'descritivoVersao',
          type: 'string'
        },
        {
          name: 'id',
          type: 'int'
        }

      ]
    });
    var store = Ext.create('Ext.data.Store', {
      model: 'KLIFT.model.mOrcamentoVersao',
    });
    var comboVersao = Ext.create('Ext.form.ComboBox', {
      fieldLabel: 'Versão',
      displayField: 'descritivoVersao',
      valueField: 'descritivoVersao',
      width: 300,
      name: 'idVersao',
      editable: false,
      store: store,
      queryMode: 'local',
      renderTo: Ext.getBody()

    });

    var carregaValoresCombo = function(record) {
      var novo = JSON.stringify(record);
      var me = this;

      if (novo !== null) {

        var item = record["raw"]["data"];

        var array = new Array();
        for (i = 0; i < item.length; i++) {

          obj = Ext.create('KLIFT.model.mOrcamentoVersao', {
            id: item[i].id,
            dthrCriacao: item[i].dthrCriacao,
            descritivoVersao: item[i].descritivoVersao,
            versao: item[i].versao
          });
          comboVersao.getStore().add(obj);
        }

      }
    }
    carregaValoresCombo({"raw":{"data":[{"id":1,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais veia","versao":0},{"id":2,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais intermediaria","versao":1},{"id":3,"dthrCriacao":"2018-02-25T00:00:00-0300","descritivoVersao":"mais NOVA","versao":2}]},"modified":{},"data":{"versao":0,"dthrCriacao":"","descritivoVersao":"","id":0},"hasListeners":{},"events":{},"stores":[],"phantom":false,"internalId":0,"id":"KLIFT.model.mOrcamentoVersao-ext-record-2","dirty":true});

  }
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>