1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    15
    Vote Rating
    0
    ust is on a distinguished road

      0  

    Default Arrow key navigation in edit Grid

    Arrow key navigation in edit Grid


    Hi,

    We have a requirement on cell navigation which should support navigation in the grid using arrow keys (while in edit mode). This requirement can be broken down into:

    1) Edit values in cell without pressing Enter key or click
    2) Press arrow keys to navigate in the grid while in edit mode .

    I am referring to the example of edit-grid (http://www.extjs.com/deploy/dev/exam...edit-grid.html) which does not provide these functionalities. Is there any other example which supports this? If not, would we be able to achieve this in some way?

    I am a beginner for Ext JS and would appreciate if someone can shed some light on this.

    Thanks in advance.

  2. #2
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    Hello
    1. You retrieves the coordinates of the current cell (and coldex rowIndex)
    2. You test the type of the button and you call the function startEditing
    Code:
    var     rowSelected = grid.activeEditor.row;
    var     colSelected = grid.activeEditor.col;
    if (rowSelected > 0)
    {
    	if (code == "38")
    		grid.startEditing (rowSelected-1, colSelected); 
    }	
    if (rowSelected < maxRowIndex)
    {
    	if (code == "40")
    	    grid.startEditing (rowSelected+1, colSelected); 
    }

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
    shanewatson is on a distinguished road

      0  

    Default


    Hi All,
    i am new member of this forum and hope to learn a lot and enjoy discussion with you.

  4. #4
    Ext User
    Join Date
    Apr 2010
    Posts
    15
    Vote Rating
    0
    ust is on a distinguished road

      0  

    Default


    Hi issameddine,

    Thanks for the reply. I apologize for my ignorance, but can you please clarify on the following:
    - On what event would the code that you gave be fired? I tried using the keydown event of the grid, but once we get into edit mode, the keydown function does not get called (I wanted to put your code in the function, but since it doesnt get called, there is something else wrong with it). Please help.

    grid.on('keydown', handleKeyDown);

    function handleKeyDown(e)
    {
    code = e.keyCode;
    alert(code);
    }
    Thanks.

  5. #5
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      1  

    Default


    Hello
    I am sorry, I forgot to mention it
    add the 'specialkey' event of TextField editor

    Code:
    listeners		:{specialkey:specialkeyfunction}
    
    specialkeyfunction=function(/* object */obj, /* Ext.EventObject */ e)
    {
          //Le code de l'évennement.
          var     code = e.getCharCode ();
          var     rowSelected = grid.activeEditor.row;
          var     colSelected = grid.activeEditor.col;
          if (rowSelected > 0)
          {
                if (code == "38")
                      grid.startEditing (rowSelected-1, colSelected); 
          }	
          if (rowSelected < maxRowIndex)
          {
                if (code == "40")
                      grid.startEditing (rowSelected+1, colSelected); 
          }
    }

  6. #6
    Ext User
    Join Date
    Apr 2010
    Posts
    15
    Vote Rating
    0
    ust is on a distinguished road

      0  

    Default


    Hi,

    This does not seem to work for me. Maybe there is some syntax error?

    Code:
    var cm = new Ext.grid.ColumnModel({
            // specify any defaults for each column
            defaults: {
                sortable: true // columns are not sortable by default           
                
            },
            columns: [
                {
                    id: 'common',
                    header: 'Common Name',
                    dataIndex: 'common',
                    width: 220,
                    // use shorthand alias defined above
                    editor: new fm.TextField({
                        allowBlank: false,
                        listener: {specialkey: specialkeyfunction}
                    })
                }, {
                    header: 'Light',
                    dataIndex: 'light',
                    width: 130,
                    editor: new fm.ComboBox({
                        typeAhead: true,
                        triggerAction: 'all',
                        // transform the data already specified in html
                        transform: 'light',
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    })
                }, {
                    header: 'Price',
                    dataIndex: 'price',
                    width: 70,
                    align: 'right',
                    renderer: 'usMoney',
                    editor: new fm.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 100000
                    })
                }, {
                    header: 'Available',
                    dataIndex: 'availDate',
                    width: 95,
                    renderer: formatDate,
                    editor: new fm.DateField({
                        format: 'm/d/y',
                        minValue: '01/01/06',
                        disabledDays: [0, 6],
                        disabledDaysText: 'Plants are not available on the weekends'
                    })
                },
                checkColumn // the plugin instance
            ]
        });
    
    function specialkeyfunction(e)
    {
            alert("function specialKeyfn");
    }
    
    // grid is then created using above cm
    I have added listener to the textfield column. However when I press keys on the text field, it does not give me the alert message. Is there some silly mistake I am making? Please help.

    Thanks.

  7. #7
    Ext User
    Join Date
    Apr 2010
    Posts
    15
    Vote Rating
    0
    ust is on a distinguished road

      0  

    Default


    Hi issameddine,

    I am not able to make it work. Maybe there is some sytax error?

    Code:
    var cm = new Ext.grid.ColumnModel({
            // specify any defaults for each column
            defaults: {
                sortable: true // columns are not sortable by default           
                
            },
            columns: [
                {
                    id: 'common',
                    header: 'Common Name',
                    dataIndex: 'common',
                    width: 220,
                    // use shorthand alias defined above
                    editor: new fm.TextField({
                        allowBlank: false,
                        listener: {specialkey: specialkeyfunction}
                    })
                }, {
                    header: 'Light',
                    dataIndex: 'light',
                    width: 130,
                    editor: new fm.ComboBox({
                        typeAhead: true,
                        triggerAction: 'all',
                        // transform the data already specified in html
                        transform: 'light',
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    })
                }, {
                    header: 'Price',
                    dataIndex: 'price',
                    width: 70,
                    align: 'right',
                    renderer: 'usMoney',
                    editor: new fm.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 100000
                    })
                }, {
                    header: 'Available',
                    dataIndex: 'availDate',
                    width: 95,
                    renderer: formatDate,
                    editor: new fm.DateField({
                        format: 'm/d/y',
                        minValue: '01/01/06',
                        disabledDays: [0, 6],
                        disabledDaysText: 'Plants are not available on the weekends'
                    })
                },
                checkColumn // the plugin instance
            ]
        });
    
    function specialkeyfunction(e)
    {
            alert("function called");
    }
    
    //grid is created using above cm
    Can you please check? Thanks.

  8. #8
    Sencha User issameddine's Avatar
    Join Date
    Apr 2008
    Location
    Tunisia
    Posts
    126
    Vote Rating
    1
    issameddine is on a distinguished road

      0  

    Default


    u must replace "listener" with "listeners"
    Quote Originally Posted by ust View Post
    Hi issameddine,

    I am not able to make it work. Maybe there is some sytax error?

    Code:
    var cm = new Ext.grid.ColumnModel({
            // specify any defaults for each column
            defaults: {
                sortable: true // columns are not sortable by default           
                
            },
            columns: [
                {
                    id: 'common',
                    header: 'Common Name',
                    dataIndex: 'common',
                    width: 220,
                    // use shorthand alias defined above
                    editor: new fm.TextField({
                        allowBlank: false,
                        listener: {specialkey: specialkeyfunction} // ==> listeners
                    })
                }, {
                    header: 'Light',
                    dataIndex: 'light',
                    width: 130,
                    editor: new fm.ComboBox({
                        typeAhead: true,
                        triggerAction: 'all',
                        // transform the data already specified in html
                        transform: 'light',
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    })
                }, {
                    header: 'Price',
                    dataIndex: 'price',
                    width: 70,
                    align: 'right',
                    renderer: 'usMoney',
                    editor: new fm.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 100000
                    })
                }, {
                    header: 'Available',
                    dataIndex: 'availDate',
                    width: 95,
                    renderer: formatDate,
                    editor: new fm.DateField({
                        format: 'm/d/y',
                        minValue: '01/01/06',
                        disabledDays: [0, 6],
                        disabledDaysText: 'Plants are not available on the weekends'
                    })
                },
                checkColumn // the plugin instance
            ]
        });
    
    function specialkeyfunction(e)
    {
            alert("function called");
    }
    
    //grid is created using above cm
    Can you please check? Thanks.

  9. #9
    Ext User
    Join Date
    Apr 2010
    Posts
    15
    Vote Rating
    0
    ust is on a distinguished road

      0  

    Default


    Hi issameddine,

    That worked!
    Thank you very much...

  10. #10
    Sencha User
    Join Date
    Jul 2010
    Posts
    19
    Vote Rating
    1
    bizcatalyst is on a distinguished road

      0  

    Default How can I get the value of maxRowIndex?

    How can I get the value of maxRowIndex?


    Hi issameddine,
    I was able to successfully implement your function to make the up arrow work, but I'm having trouble figuring out how to get the value of maxRowIndex so the down arrow will work. Do you know how to gain access to this from within the specialkeyfunction? I'm returning a totalProperty called totalCount in my datastore object which has the value I need but I'm not sure how to access it from within the colum model where the specialkeyfunction is defined.
    Thank you,
    Robert

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar