1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    2
    Fonnit is on a distinguished road

      0  

    Default Answered: Tab key in grid

    Answered: Tab key in grid


    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].

  2. Try this:
    Code:
    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()
        });
    });

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    you can try following code:

    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
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    2
    Fonnit is on a distinguished road

      0  

    Default


    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..

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


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

  6. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    2
    Fonnit is on a distinguished road

      0  

    Default


    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.

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Try this:
    Code:
    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()
        });
    });

  8. #7
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    15
    Vote Rating
    2
    Fonnit is on a distinguished road

      0  

    Default


    Hi vietits,

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

Thread Participants: 2