numberfield blur listener

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).

Code:

---

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!!

Hi,

You can try this code:-

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');
                            }
                        }
                    }
                }
            ]
    });


})

---

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

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!

Code:

---

{

                    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:

Code:

---

// 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

Code:

---

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!!