Tab key in grid

[Fonnit]

Hi all,

I have a grid like the below one using Extjs v4.1.0.
#1.png


The column of [Produce Name] can not be edited.
The rest of the columns can be edited.


IF I click the Tab key in the column of [Produce Code], the focus will
stop at the column of [Produce Name].


How do I skip the uneditable column when I click the Tab key ?
→I want to stop at the column of [Group[B]] when I click the tab key in the [Produce code].

[sword-it]

Hi,

you can try following code:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1
           
        },
        {header: 'Phone', dataIndex: 'phone', editor: {
                xtype: 'textfield',
                allowBlank: false
            }}
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

For more detail you can see this link:http://docs.sencha.com/ext-js/4-1/#!...in.CellEditing

[Fonnit]

Hi sword-it,
Thanks for your suggestion.

The focus also stops at the email column when
I use tab key in the name column in your example.

But I want it to stop at the phone column
when I click the tab key in the name column.

Does anyone can help me to fix the problem ?
Thanks..

[vietits]

Try to change selType from 'cellmodel' to 'rowmodel'.

[Fonnit]

Hi vietits,

Thanks for your suggestion.

Can it be accomplished in a cellModel?
Beacuse I wish move the cell's focus using the arraykey as cellmodel.

Thanks.

[vietits]

Try this:

Ext.onReady(function(){
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1
               
            },
            {header: 'Phone', dataIndex: 'phone', editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }}
        ],
        selType: 'cellmodel',
        selModel: {
            onEditorTab: function(editingPlugin, e) {
                var me = this,
                    view = me.views[0],
                    record = editingPlugin.getActiveRecord(),
                    header = editingPlugin.getActiveColumn(),
                    position = view.getPosition(record, header),
                    direction = e.shiftKey ? 'left' : 'right';


                do {
                    position  = view.walkCells(position, direction, e, me.preventWrap);
                } while(position && !view.headerCt.getHeaderAtIndex(position.column).getEditor());


                if (position) {
                    editingPlugin.startEditByPosition(position);
                }
            },
        },
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
});

[Fonnit]

Hi vietits,

My problem solved using your code.
Thank you very much.