Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
    alighm is on a distinguished road

      0  

    Default numberfield blur listener

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

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,332
    Vote Rating
    83
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    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');
                                }
                            }
                        }
                    } 
                ]
        });
    
    
    })
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
    alighm is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
    alighm is on a distinguished road

      0  

    Default


    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!!
    Last edited by sword-it; 24 Jul 2012 at 10:05 PM. Reason: code formatting

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar