ComboBox is not editable in Grid

[Karthi127]

Hi,

I am new to ExtJS, currently I am working on creating editable grid. There is a column with combobox which is not editable when i am adding new row to the grid, please help me to make it editable. Below is the code I am using to create editable Grid. Thanks for the help.

 Ext.require([
                'Ext.data.*',
                'Ext.grid.*',
                'Ext.toolbar.Paging',                
                'Ext.Util.*',
                'Ext.picker.*',
                'Ext.window.*',
                'Ext.tip.*',
                'Ext.form.*',
                'Ext.EventObject',
                'Ext.data.StoreManager',
                'Ext.util.DelayedTask',
                'Ext.view.BoundList',
                'Ext.view.BoundListKeyNav'
            ]);


    
            Ext.onReady(pageInitialize);
            
            function pageInitialize(){
                
                
                Ext.define('HedgeModel',{
                    extend:'Ext.data.Model',
                    fields:[
                        {name:'accountsubtype',type:"string"},
                        {name:'accountNumber',type:"string"}
                    ]
                });
                
                 hedgeStore=Ext.create('Ext.data.Store',{
                    model:'HedgeModel',
                    storeId:'HedgeStore'
                });
                
                var cellEditing=Ext.create('Ext.grid.plugin.CellEditing',{
                    clicksToEdit:1
                });
                
                
                
               var grid=Ext.create('Ext.grid.Panel',{
                   store:hedgeStore,
                   columns: [{
                           header:'Account Type',
                           dataIndex:'accountsubtype',
                           width:130,
                           editor: new Ext.form.field.ComboBox({
                               typeAhead:true,
                               triggerAction:'all',
                               editable:true,
                               selectOnTab:true,
                               store:['Shade','Share'],
                                  
                               
                               lazyRender:true,
                               listClass:'x-combo-list-small'
                           })
                   },{
                        id:'accountNum',
                        header:'Account Number',
                        dataIndex:'accountNumber',
                        flex:1,
                        editor:{
                            allowBlank:false
                        }
                   },{
                       xtype:'actioncolumn',
                       width:30,
                       sortable:false,
                       items:[{
                               icon:'../resources/images/delete.png',
                               tooltip:'Delete Row',
                               handler: function(grid,rowIndex,colIndex)
                               {
                                   hedgeStore.removeAt(rowIndex);
                               }
                       }]
                   }],
                   selModel:{
                            selType:'cellmodel'
                   },
                   renderTo:'resultGrid',
                   width:600,
                   height:300,
                   title:'Add Accounts To This Template',
                   frame:true,
                   tbar:[{
                       text:'Add Account',
                       handler: function(){
                           alert("Function Started");
                           var r=Ext.create('HedgeModel',{
                               accountsubtype:'Share',
                               accountNumber:''
                           });
                           alert("Record created");
                           hedgeStore.insert(0,r);
                           alert("Record inserted");
                           cellEditing.startEditByPosition({row:0,column:0});
                       }
                   }],
               plugins:[cellEditing]
               }); 
               
              
                
            }

[scottmartin]

Can you specify the version of Ext that you are using?

Scott.

[Karthi127]

Thanks Scott. I am using version 4. (Not sure how to confirm the version, in ext-all.js it is mentioned as 4.)

[scottmartin]

Please see the following example:
http://jsfiddle.net/5NDH8/

Scott.

[Karthi127]

Thanks Scott. It worked. Thanks for the help. could you please tell me if there is any article for implementing auto complete in combobox. The combobox list will be fetched from the server for every inout character from user.

[scottmartin]

Have a look at this example. This is handled automatically an defaults to 4 chars before searching:

http://dev.sencha.com/deploy/ext-4.1...um-search.html

Scott.