numberfield blur listener

[alighm]

Hey Guys,

I am using a numberfield xtype and I have a blur listener defined. What I want to try to do is, inside my blur event, I would want to get the value (name for instance) of another column in my gridpanel (which I have my numberfield defined).

this.grid = Ext.create('Ext.grid.Panel', {                autoScroll: true,
                height: 300,
                forceFit: true,
                store: this.store,
                viewConfig: {
                    loadMask: false
                },


                // grid columns
                columns:[{
                    id: "appName",
                    text: "Name",
                    dataIndex: 'name',
                    editor: {
                        allowBlank: false
                    },
                    width: 150
                },{
                    text: "Memory",
                    dataIndex: 'resources.memory',
                    width: 70,
                    selectOnTab: true,
                    editor: {
                        xtype: 'combobox',
                        allowBlank: false,
                        selectOnTab: true,
                        store: [
                        ['128M','128M'],
                        ['256M','256M'],
                        ['512M','512M'],
                        ['1G','1G'],
                        ['2G','2G']
                        ],
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    }
                },{
                    text: "Instances",
                    dataIndex: 'instances',
                    width: 60,
                    editor: {
                        xtype: 'numberfield',
                        selectOnTab: true,
                        allowBlank: false,
                        step: 1,
                        minValue: 1,
                        maxValue: 19,
                        listeners : {
                            'blur': function(t, ev, b) {
//                                Ext.getBody().mask("Modifying Instance...");
//                                $.get("updateInstances/"+)
                                alert(t.lastValue);
                            },
                            'focus': function() {
                                console.log('I AM FOCUS');
                            }
                        }
}

Now if you look at the code, I want to be able to grab the value of "appName" (the first object inside the grid column) into my blur event on my numberfield.

Would appreciate any help!!

[sword-it]

Hi,

You can try this code:-

Ext.onReady(function () {


    var grid = Ext.create('Ext.grid.GridPanel', {
        title: 'EditorGrid'
        , renderTo: Ext.getBody()
        , selType: 'cellmodel'
        , plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ]
        , height: 200
        , width: 500
        , store: new Ext.data.JsonStore({
            data: {
                item: [
                        {
                            name: 'xyz'
                            , resourcesmemory: '129M'
                            , instances: '1'
                        },
                        {
                            name: 'abc'
                            , resourcesmemory: '125M'
                            , instances: '12'
                        },
                        {
                            name: 'ttt'
                            , resourcesmemory: '200M'
                            , instances: '2'
                        }
                    ]
            }
                , fields: ['name', 'resourcesmemory', 'instances']
                , proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'item'
                    }
                }
        })
            , columns: [
               {
                   id: "appName",
                   text: "Name",
                   dataIndex: 'name',
                   editor: {
                       allowBlank: false
                   },
                   width: 150
               },
                {
                    text: "Memory",
                    dataIndex: 'resourcesmemory',
                    width: 70,
                    selectOnTab: true,
                    editor: {
                        xtype: 'combobox',
                        allowBlank: false,
                        selectOnTab: true,
                        queryMode: 'local',
                        triggerAction: 'all',
                        store: [
                        ['128M', '128M'],
                        ['256M', '256M'],
                        ['512M', '512M'],
                        ['1G', '1G'],
                        ['2G', '2G']
                        ],
                        lazyRender: true,
                        listClass: 'x-combo-list-small'
                    }
                },
                {
                    text: "Instances",
                    dataIndex: 'instances',
                    width: 60,
                    editor: {
                        xtype: 'numberfield',
                        selectOnTab: true,
                        allowBlank: false,
                        step: 1,
                        minValue: 1,
                        maxValue: 19,
                        listeners: {
                            'blur': function (t, ev, b) {
                                var columnData = grid.getSelectionModel().getSelection()[0].data
                                    , value = columnData.name;
                                alert(value);
                            },
                            'focus': function () {
                                console.log('I AM FOCUS');
                            }
                        }
                    }
                } 
            ]
    });


})

[alighm]

This is not a good help. There are a couple of things that I see a issue.

• Where did the grid object come from?
• you have hardcoded 0 into the array index. This doesn't seem dynamic to grab the name for different instances.

I don't think this is a correct solution sword-it

[alighm]

OK! So with the great help of my friend Aaron, I was able to resolve the issue.

In order to get more details about the records of your gridpanel using the CellEditing object, the place I had configured my listener was incorrect!

{
                    text: "Instances",
                    dataIndex: 'instances', 
                   width: 60,
                    editor: {
                        xtype: 'numberfield',
                        selectOnTab: true,
                        allowBlank: false,
                        step: 1,
                        minValue: 1, 
                       maxValue: 19, 
                       listeners: {
                            'blur': function (t, ev, b) {
                              var columnData = grid.getSelectionModel().getSelection()[0].data,                               , value = columnData.name;
                                alert(value);
                            },
                            'focus': function () { 
                               console.log('I AM FOCUS'); 
                           }
                        } 
                    }

You should have the listeners property at the CellEditing object instead:

// editing cell plugin            this.cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners : {
                    'edit': function(editor, e) {
                        if (e.field == "instances") {
                            Ext.getBody().mask("Modifying Instance...");
                            $.get("updateInstance/" + e.record.get('name') + "/" + e.value, function() {
                                e.grid.store.load();
                                Ext.getBody().unmask();
                            });
                        }
                    }
                }
});

This way using

e.record.get(<field-name>)

you can retrieve the information you need from the column you want!

I hope the information becomes useful. It sure was for me!!