Combobox in grid tutorial?

[johnnyboyct]

Is there a combo box in a grid tutorial anywhere? Ive seen a alot of threads and Ive been screwing around for 3 days lol. Im trying to have 1 column a combo, that has a selected value. If they change it, id like it to say the text and post the value. Ive seen posts for a bunch of different ways, is there a master thread?

Heres what i got, its defaulting, but it posts the name When you select, it changes to the number Ive tried everything, any help appreciated, the dropdown is the same on all the columns.

<div id="binding"></div>        
        <script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();

    // shorthand alias
    var fm = Ext.form;


    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           id:'id',
           header: "ID",
           dataIndex: 'id',
           width: 50,
           hidden: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        },
        {
           
           header: "Description",
           dataIndex: 'description',
           width: 220,
           editor: new fm.TextField({
               allowBlank: false
           })
        }
        
        
        ,{
           header: "unit name",
           dataIndex: 'unit_name',
           width: 130,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               valueField: undefined,
               triggerAction: 'all',
               transform:'light',
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },
        {header: "spec_description_id", width: 0, sortable: true, hidden: true},
        {header: "Actions", width:100, sortable:false, hidden:false, dataIndex: 'id',
            renderer: function() {
                return '<div class="controlBtn"><img src="http://localhost/js/ext/icons/fam/delete.gif" width="16" height="16" class="control_delete"></div>';
            }
        
                
                
                
                
                
        },{
           header: "Value",
           dataIndex: 'spec_value',
           width: 200,
           editor: new fm.TextField({
               allowBlank: true
           })
        }
        
    ]);

     
    
    
    
    // by default columns are sortable
    cm.defaultSortable = true;

    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var Plant = Ext.data.Record.create([
           {name: 'id'},
           {name: 'description'},
           {name: 'unit_name'},
           {name: 'spec_value'},
           {name: 'spec_description_id'}
           
      ]);

    // create the Data Store
    var store = new Ext.data.Store({
        
        proxy: new Ext.data.HttpProxy({
        method: 'GET',
        disableCaching:true,
        url: "http://localhost/index.php?c=ajax_grid&m=get_specs&pid=2&wid=34"
        }),

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "plant" tag
               record: 'plant'
           }, Plant),

        remoteSort:true
    });



    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'binding',
        width:800,
        height:500,
        title:'Specs',
        frame:true,
        clicksToEdit:1,

        tbar: [{
            text: 'Add',
            handler : function(){
                var p = new Plant({
                       id:-1,
                       description:'',
                       unit_name:'',
                       spec_value:''

                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        },{
            text:'Submit',
            handler : function() { 
              var json = '';
              store.each(function(store){
                  json += Ext.util.JSON.encode(store.data) + ',';
              });
              json = json.substring(0, json.length - 1);
              Ext.getDom('GridData').value = json
                document.gridform.submit();
            }
        }
        
        
        ]
    });
    store.load();
    
    grid.on('click', function(e) {
    
        var btn = e.getTarget('.controlBtn');        

        if (btn) {

            var t = e.getTarget();

            var v = this.view;

            var rowIdx = v.findRowIndex(t);

            var record = this.getStore().getAt(rowIdx);            

            var control = t.className.split('_')[1];

            switch (control) {

                case 'delete':
                    store = grid.getStore();
                    store.remove(record)
                    console.log('edit this record - ' + record.id);

                    break;

            }            

        }

    }, grid); 
});

        </script>

[Gunmen]

See the second column of this example. Hope this helps.

[johnnyboyct]

yeah it seems that example transforms a select and everything else I find doesnt... Especially the code to get the selected text instead of value.

[mjlecomte]

There's a screencast by Scott Walter with comboBox in it. He had problems with this also and it's all recorded on the screencast (him solving the problem and explaining). My example has a couple of comboBoxes, loaded locally and remotely.

You may also try www.extjs.eu, several examples there.

[johnnyboyct]

Looks like his solution is:

renderer:  function(data, cell, record, rowIndex, columnIndex, store) {
                            switch(data) {
                                case "A":
                                    cell.css = "redcell";
                                    return "High";
                                case "B":
                                    return "Medium";
                                case "C":
                                    return "Low";
                            }                            
                        },

Im too frustrated with this to do anymore for the time being lol.

[Dr. Flink]

I'm having the same problem. The example at http://extjs.com/deploy/dev/examples...edit-grid.html isn't helping because it's using the same option value as text value:

<select name="light" id="light" style="display: none;">
    <option value="Shade">Shade</option>
    <option value="Mostly Shady">Mostly Shady</option>
    ...
    ...
</select>

What we both want is something looking like this:

<select name="light" id="light" style="display: none;">
    <option value="1">Shade</option>
    <option value="2">Mostly Shady</option>
    ...
    ...
</select>

Again, the problem is when changing the grid combo value. The cell will display the option value (1 or 2...) and not the text (Shade, Mostly Shady).

How to fix this?
Anybody?

[Zecc]

I'm new at this (this is my first post), so don't shoot me.


But have you seen these threads?

ComboBox renderer for EditorGridPanel

ComboBox for Grid (combo having local store)

Thoughts on combox plus editorGrid, plus example

One of them may be of help to you.


Also check out FAQ: Grid (compiled questions, examples/tutorials, listeners, extensions)

[Dr. Flink]

@Zecc: Thanks for your reply! I've tested the different approaches but nothing seems to work for me...

If we take maingreens thoughts on combox for example. The grid is updating, displaying the displayField text (as I want), but the valueField value sent to the server wont change.
(Before I edit the cell it has a value of 1. When I change to another option, it should have the value of 2, but it is still sending customercategory_id = 1):

...
...
var storeCombo = new Ext.data.JsonStore({
  url: '/customercategory/json',
  baseParams: { method: 'get' },
  root: 'rows',
  fields:[
    {name: 'customercategory_id', type: 'int'},
    {name: 'category'}
  ]
});
storeCombo.load();

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
  sm,
  ...
  ...
  {
    header: "Kategori",
    dataIndex: 'category',
    editAlternateField:'customercategory_id',
    editor: new Ext.form.ComboBox({
      store: storeCombo,
      valueField:'customercategory_id',
      displayField:'category',
      allowBlank:false,
      forceSelection:true,
      triggerAction: 'all',
      reloadOnEdit:true
    })
  },
  ...
  ...
]);

[mjlecomte]

There's a new page in town in the wiki. http://extjs.com/learn/Ext_FAQ

Perhaps some of you will help contribute your new found wisdom to the comboBox page (and others)?

[Dr. Flink]

I'm not getting anywhere with this and it's driving me absolutely crazy. I've been testing all the different ways that Zecc pointed out for me, but nothing seems to work. I just can't find out what I'm doing wrong! Please, can somebody help me with this?

I have an EditorGridPanel.
In one of the columns the editor is going to be a comboBox.
I create a Store:

var recordCategory = Ext.data.Record.create([
    {name: 'customercategory_id', type: 'int'},
    {name: 'category', type: 'string'}
]);
var storeCategory = new Ext.data.Store({
    url: '/customercategory/json',
    baseParams: { method: 'get' },
    root: 'rows',
    reader: new Ext.data.JsonReader({
        root: 'rows'
    }, recordCategory)
});
/*
This will return following from server:
{"rows":[{"customercategory_id":"2","category":"Kagstedt"}, "customercategory_id":"1","category":"\u00d6vrigt"}]}
*/

I create the ComboBox:

var comboCategory = new Ext.form.ComboBox({
    allowBlank: false,
    lazyRender: true,
    maxLength: 50,
    triggerAction: 'all',
    store: storeCategory,
    valueField: "customercategory_id",
    displayField: "category"
});

Then in the ColumnModel I'm going to place this comboBox:

var cm = new Ext.grid.ColumnModel([
    {
        header: "Kategori",
        dataIndex: 'customercategory_id',
        editor: comboCategory
    }
]);

What am I supposed to do next to make this work?
All help I can get on this is really welcome!