Grid Editing Example

by devd

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

var count = "a";

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

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })],
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    listeners : {
        edit : function( editor, e, eOpts ){
             var text = e.record.data.name;
            console.log(text);
                    if (text.length <= 26 && !text.match(/[.:-]/)) {
                        if (text.length == 26) {
                            text = text[25] == ' ' ? text : text.substring(0, text.lastIndexOf(' '));
                        }
                        //code to set short name cell value.
                 var record = e.record;
                 record.set("email",text);
                    }
        }
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name',
        editor: {
            xtype: 'textarea',
            allowBlank: false
        }
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }],

    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});