Results 1 to 5 of 5

Thread: (New to Ext) Ext 6.2 how to disable column cell -- apply to only a specific row

  1. #1
    Sencha User
    Join Date
    Feb 2017
    Posts
    3

    Default Answered: (New to Ext) Ext 6.2 how to disable column cell -- apply to only a specific row

    Hi,

    I have a grid which has 4 columns - combo, combo, string, string. I want to disable the 2nd combobox depending on the selected option in the 1st combobox without having to disable the whole 2nd column. How do I do this?
    Sorry, I really couldn't understand the examples given in the thread because they're for the old versions.


    e.g
    col1 col2 col3 col4
    data1.1 data1.2 (enabled) data1.3 data1.4
    data2.1 data2.2 (disabled) data 2.3 data2.4
    data3.1 data3.2 (disabled) data 3.3 data3.4


    Below is my code.

    Code:
    var grid = Ext6.create('Ext6.grid.Panel', {
                    renderTo: 'test_data',
                    store: matrixStore,
                    width: 800,
                    height: 500,
                    title: 'Test Grid',
                    columns: [
                    {
                            text: 'Type',
                            width: '30%',
                            sortable: false,
                            hideable: false,
                            dataIndex: 'type',
                            editor: {
                                xtype: 'combobox',
                                allowBlank: false,
                                displayField:'type',
                                valueField:'type',
                                queryMode:'local',
                                store: typeStore,
                                listeners: {
                                'select': function (c, r, i) {
                                    var type = r.get('id') ;
                                    if (type == 1 || type == 3) {
                                        //disable the 2nd column of the same line
                                    }
                                }
                            
                                }
                            },
                            
                        },
                        {
                            text: 'Employee',
                            width: '30%',
                            sortable: false,
                            hideable: false,
                            dataIndex: 'employee',
                            xtype: 'gridcolumn', <!-- is this needed? -->
                            editor: {
                                xtype: 'combobox',
                                allowBlank: false,
                                displayField:'name',
                                valueField:'id', <!-- this displays the id after selecting the value, dont know why -->
                                queryMode:'local',
                                store: employeeStore
                            },
                        },
                        {
                            text: 'Minimum Amount',
                            width: '20%',
                            dataIndex: 'min',
                            disabled: true,
                        },
                        {
                            text: 'Max Amount',
                            width: '20%',
                            dataIndex: 'max',
                            editor: 'textfield'
                        }
                    ],
                    selModel: 'cellmodel',
                    plugins: {
                        ptype: 'cellediting',
                        clicksToEdit: 1
                    },
                    
                });

  2. Actually, instead of the grid's cellclick event, it might be better to listen for the beforeedit event on the cellediting plugin. Arguments include a context which includes information about the cell clicked such as record, rowIdx and colIdx that hopefully can be used to determine if a cell should be editable. If not, you can return false to avert the edit.

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    To which thread are you referring?

    I'm afraid there's no built-in way to disable a cell. Disabling rows is not even supported. I think you'd have to make the cell appear disabled and then put logic behind the cellclick event listener to determine whether to allow the edit based on row and cell position.

  4. #3
    Sencha User
    Join Date
    Feb 2017
    Posts
    3

    Default

    Hi Gary,

    Threads that come up with search tags as "extjs disable cell in grid" like this one: https://www.sencha.com/forum/showthr...her-cell-value.

    Anyway, thank you for responding. Can you give me an example for that cellclick event? Also, If I'm in row2 cell3, how can I get the value in the same row but different cell (row 2 cell 2 for example).

    Thanks again.

  5. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Actually, instead of the grid's cellclick event, it might be better to listen for the beforeedit event on the cellediting plugin. Arguments include a context which includes information about the cell clicked such as record, rowIdx and colIdx that hopefully can be used to determine if a cell should be editable. If not, you can return false to avert the edit.

  6. #5
    Sencha User
    Join Date
    Feb 2017
    Posts
    3

    Default

    Thanks!!

    Was able to disable editing for the field I need.

    Code snippet below:
    Code:
    listeners: {
    	'beforeedit': function(editor, context, eOpts) {
        	        var record = context.record;
    		var column = context.colIdx; //or can be context.column if you want to compare with column id
    		
    		if ((record.get('type') == 'NoSelection' && column == 2) { //2 is the index of the column im disabling
    			return false;
    		}
    	},
    },

  7. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Glad to hear it! Thanks for sharing your solution with the community.

Similar Threads

  1. Replies: 2
    Last Post: 16 Feb 2013, 12:59 AM
  2. Replies: 2
    Last Post: 23 Nov 2011, 7:03 AM
  3. Disable Edit for Specific Column
    By philrl9 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 Jul 2008, 6:37 AM
  4. Grid questions - render whole column, disable specific celleditors
    By mindstabbing in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 30 Jun 2008, 12:39 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •