Menset Nilai Default combobox ( Ext.form.field.ComboBoxView, xtype: combobox, combo )

[Draft]

  1. Pastikan data untuk combobox tersebut ada di json response. 
  2. Pastikan Store  sudah diload (bisa dengan mengeset autoLoad:true atau meload secara programatik di controller)
  3. Opsi forceSelection: false  di combobox harus di set false
  4. Pada controller, ginakan method setValue() contoh : 
    Ext.getCmp('id_asnaf_ajuan').setValue(record.get('id_asnaf'));
  5. Opsi value di combobox tidak bekerja sebagai mana mesti nya 
Untuk cascade dropdown, dapat melihat studi kasusnya di [2] terutama pada fungsi showEditWindow : 

Controller : 

.....
    /**
     * Displays common editing form for add/edit operations
     * @param {Ext.data.Model} record
     */
    showEditWindow: function( record ) {
        var me = this,
            win = me.getPenerimaManfaatLembagaEditWindow(),
            isNew = record.phantom;

        // if window exists, show it; otherwise, create new instance
        if( !win ) {
            win = Ext.widget( 'penerimamanfaat.lembaga.edit.window', {
                title: isNew ? 'Tambah Penerima Manfaat Lembaga Baru' : 'Edit Penerima Manfaat Lembaga'
            });
        }
        // show window
        win.show();
        
      //pre-select 
        var kd_kotamadya_kabupaten = Ext.getCmp('kd_kotamadya_kabupaten');
   kd_kotamadya_kabupaten.getStore().load({
    params:{
     node:record.get('kd_propinsi') 
    }
   });
   
        var kd_kecamatan = Ext.getCmp('kd_kecamatan');
        kd_kecamatan.getStore().load({
    params:{
     node:record.get('kd_kotamadya_kabupaten') 
    }
   });
        
        var kd_kelurahan_desa = Ext.getCmp('kd_kelurahan_desa');
        kd_kelurahan_desa.getStore().load({
    params:{
     node:record.get('kd_kecamatan') 
    }
   });            
      //end pre-select
        
        
        
        // load form with data
        win.down( 'form' ).loadRecord( record );        
        // prepare data for store
        data = me.prepareImageData( record.get( 'foto_pemohon' ) );
        //load image view with data
        win.down( '#images' ).getStore().loadData( data );
        //load data untuk ajuan
        win.down( '#ajuans' ).getStore().load({ params: { 'kode_mustahik': record.get( 'kode_mustahik' ) } });        
    },
....


View  : 

....
                     {
                       xtype: 'combobox',
                       id: 'kd_kotamadya_kabupaten',
                                                name: 'kd_kotamadya_kabupaten',
                                                hiddenName: 'kd_kotamadya_kabupaten',
                       fieldLabel: 'Kotamadya/Kabupaten',
                       disabled: true,
                       displayField: 'nama_kotamadya_kabupaten',
                       valueField: 'kd_kotamadya_kabupaten',
                       editable:false,
                       mode: 'local',
                       store: {
                        type: 'master.lokasi.comboboxkotamadyakabupaten'
                       },
                       emptyText: 'Pilih Propinsi terlebih dahulu',
                       listeners: {
                        beforequery: function(queryEvent, eOpts) {
                        queryEvent.combo.store.proxy.extraParams = {
                        node:  me.kd_propinsi
                        }
                        },
                    'select' : function(combo,records,eOpts) {
                    var selectedValue         = combo.getValue();
                       var record                = combo.findRecord(combo.valueField || combo.displayField, selectedValue);
                       me.kd_kotamadya_kabupaten = record.get('kd_kotamadya_kabupaten');
                       
                       var kd_kecamatan = Ext.getCmp('kd_kecamatan');
                       kd_kecamatan.enable();
                       kd_kecamatan.clearValue();
                       kd_kecamatan.getStore().load({
                        params:{
                         node:me.kd_kotamadya_kabupaten 
                        }
                       });
                    }
                    }    
                    }                    
                                      ]
                                  },
....

ExtJS menggunakan versi 4.2

Referensi

  1. Extjs 4 combobox default value,  http://stackoverflow.com/questions/5965416/extjs-4-combobox-default-value
  2. ebmt / public / js / apps / ebmt / app / controller / PenerimaManfaatLembaga.js
Comments