1. #1
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    Answers
    1
    mono blaine will become famous soon enough

      0  

    Default Answered: Retrieving grid row editor through Ext.ComponentQuery

    Answered: Retrieving grid row editor through Ext.ComponentQuery


    Is there any way to get the row editor panel (Ext.grid.RowEditor) of a grid through Ext.ComponentQuery.query method? I need it to register an event for a field in the row editor panel via a controller. Actually this is easy if we simply use listeners, but I wonder how it could be done in a controller.

    By the way Ext.grid.RowEditor is an undocumented component and does not have an alias that could have been used in a component query string.

  2. It appears you have to register an xtype for Ext.grid.RowEditor:

    Code:
    Ext.ComponentManager.registerType("hede", Ext.grid.RowEditor);
    then you can query it:

    Code:
    Ext.ComponentQuery.query("hede");

  3. #2
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    Answers
    1
    mono blaine will become famous soon enough

      0  

    Default


    It appears you have to register an xtype for Ext.grid.RowEditor:

    Code:
    Ext.ComponentManager.registerType("hede", Ext.grid.RowEditor);
    then you can query it:

    Code:
    Ext.ComponentQuery.query("hede");

  4. #3
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Vote Rating
    3
    Answers
    3
    castitas is on a distinguished road

      1  

    Post


    The roweditor fires its events through the grid, so if you put
    Code:
    this.control({
        'myGrid':{
            roweditorevent: this.fn()
        }
    ...
    in your controller, you can catch any of the roweditor events.
    word

  5. #4
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    Answers
    1
    mono blaine will become famous soon enough

      0  

    Default


    Yes you are right, but the events I want to listen to actually belong to the components (textfield, for instance) within the roweditor panel. I don't think those events are also relayed to the grid panel.

  6. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    Vote Rating
    0
    nick_laros is on a distinguished road

      0  

    Default


    hei mono blaine,

    I'm trying to use

    Code:
    Ext.ComponentManager.registerType("hede", Ext.grid.RowEditor);
    but
    Code:
    Ext.ComponentQuery.query("hede");
    return undefined to me

  7. #6
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    Answers
    1
    mono blaine will become famous soon enough

      0  

    Default


    Well, all I can say is that it used to work. I've also tested now and as of 4.1.1a it doesn't work anymore. Also tried Ext.ClassManager.setAlias, but it didn't work either. Just another ExtJS mystery, I guess.

  8. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    Vote Rating
    0
    nick_laros is on a distinguished road

      0  

    Default


    yup, I've been searching everywhere but no luck finding one solution..

  9. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    6
    Vote Rating
    0
    nick_laros is on a distinguished road

      0  

    Default


    I somehow managed to succesfully listen event of component within roweditor..
    lets assume, I have a view xtype `mypanel`, which have a grid with roweditor plugin inside it. I added numberfield within that roweditor. then I try calling:
    Code:
    Ext.ComponentQuery.query('mypanel numberfield')
    the result was beyond what I expected. it return all numberfield inside `mypanel` view except numberfield within roweditor.. (strange isn't it)

    then, I try adding `id` config to that numberfield (for example: costumerName) and execute ComponentQuery again, this time without `mypanel` selector:
    Code:
    Ext.ComponentQuery.query('numberfield[id=costumerName]')[0]
    finally it works.. if anyone have a better suggestion please let me know..
    this is my code..
    Code:
    // store
    Ext.define('Exp.store.Barang', {
        extend: 'Ext.data.Store',
        fields: ['nama','hargaSatuan','totalBarang','hargaTotal'],
        data:[
            {nama:'Square'},
            {nama:'Oval'},
            {nama:'Triangle'}
        ]
    });
    
    // view
    Ext.define('Exp.view.PropGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.propgrid',
        store: Ext.data.StoreManager.lookup('Barang'),
        title: 'Coba Grid Editing',
        selType: 'rowmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ],
        columns: [
            {
                header: 'Nama Barang',
                dataIndex: 'nama'
            },
            {
                header: 'Jumlah Barang',
                dataIndex: 'totalBarang',
                editor: {
                    xtype: 'numberfield',
                   // added custom config 'field' for querying purpose on controller
                    field: 'jmlhBrg',
                    selectOnFocus: true,
                    allowDecimals: true,
                    decimalPrecision: 2
                }
            },
            {
                header: 'Harga Satuan',
                dataIndex: 'hargaSatuan',
                editor: {
                    xtype: 'numberfield',
                    // added custom config 'field' for querying purpose on controller
                    field: 'hrgSatuan',
                    selectOnFocus: true,
                    hideTrigger: true
                }
            },
            {
                header: 'Total Harga',
                dataIndex: 'hargaTotal'
            }
        ]
    });
    
    // controller
    Ext.define('Exp.controller.Prop', {
        extend: 'Ext.app.Controller',
        views: ['PropGrid'],
        init: function () {
            this.control('numberfield[field=jmlhBrg]', {change:this.jmlhBrgChange});
        },
        jmlhBrgChange: function (field, nv, ov) {
            // for the sake of simplicity to show that it works, code below will changes field hrgSatuan with new value of field jmlhBrg
            Ext.ComponentQuery.query('numberfield[field=hrgSatuan]')[0].setValue(nv);
        }
    });

Thread Participants: 2