Sencha Grid cell 에디팅 처리

plugins가 'Ext.grid.plugin.RowEditing'인경우

Ext.onReady(function () {
    // Sample data
    const data = [
        { name: 'John Doe', email: 'john.doe@example.com', age: 30 },
        { name: 'Jane Smith', email: 'jane.smith@example.com', age: 25 },
        { name: 'Mike Johnson', email: 'mike.johnson@example.com', age: 35 }
    ];

    // Define a data store
    const store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'age'],
        data: data
    });

    // Define the RowEditing plugin
    const rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2 // Double-click to edit
    });

    // Define the grid
    const grid = Ext.create('Ext.grid.Panel', {
        title: 'Editable Grid Example',
        store: store,
        plugins: [rowEditing], // Attach RowEditing plugin
        columns: [
            {
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    vtype: 'email' // Validate as an email
                }
            },
            {
                text: 'Age',
                dataIndex: 'age',
                flex: 1,
                editor: {
                    xtype: 'numberfield',
                    minValue: 0, // Minimum value
                    maxValue: 120 // Maximum value
                }
            }
        ],
        selModel: {
            type: 'rowmodel' // Enable row selection
        },
        listeners: {
            // Automatically start editing when a row is selected
            selectionchange: function (selModel, selected) {
                if (selected.length > 0) {
                    const selectedRecord = selected[0];
                    const rowIndex = store.indexOf(selectedRecord);
                    rowEditing.startEdit(rowIndex, 0); // Start editing the first column
                }
            }
        },
        height: 300,
        width: 600,
        renderTo: Ext.getBody()
    });
});

plugins가 'Ext.grid.plugin.CellEditing'인경우

Ext.onReady(function () {
    // Sample data
    const data = [
        { name: 'John Doe', email: 'john.doe@example.com', age: 30 },
        { name: 'Jane Smith', email: 'jane.smith@example.com', age: 25 },
        { name: 'Mike Johnson', email: 'mike.johnson@example.com', age: 35 }
    ];

    // Define a data store
    const store = Ext.create('Ext.data.Store', {
        fields: ['name', 'email', 'age'],
        data: data
    });

    // Define the RowEditing plugin
    const cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2 // Double-click to edit
    });

    // Define the grid
    const grid = Ext.create('Ext.grid.Panel', {
        title: 'Editable Grid Example',
        store: store,
        plugins: [cellEditing], // Attach RowEditing plugin
        columns: [
            {
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                text: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    vtype: 'email' // Validate as an email
                }
            },
            {
                text: 'Age',
                dataIndex: 'age',
                flex: 1,
                editor: {
                    xtype: 'numberfield',
                    minValue: 0, // Minimum value
                    maxValue: 120 // Maximum value
                }
            }
        ],
        selModel: {
            type: 'rowmodel' // Enable row selection
        },
        listeners: {
            // Automatically start editing when a row is selected
            selectionchange: function (selModel, selected) {
                if (selected.length > 0) {
                    const selectedRecord = selected[0];
                    const rowIndex = store.indexOf(selectedRecord);
                    cellEditing.startEdit(rowIndex, 0); // Start editing the first column
                }
            }
        },
        height: 300,
        width: 600,
        renderTo: Ext.getBody()
    });
});

plugins 다르게 처리

// Case1
    const grid = Ext.create('Ext.grid.Panel', {
        title: 'Editable Grid Example',
        store: store,
        plugins: [
            // Configure the RowEditing plugin
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2 // Double-click to edit
            })
        ],
        columns: [
        
// Case2
        plugins: [
            // Configure the RowEditing plugin directly
            {
                ptype: 'rowediting',
                clicksToEdit: 2, // Double-click to edit
                 pluginId: 'rowEditingPlugin' // Assign an ID for future reference
            }
        ],