PDA

View Full Version : Retrieving grid row editor through Ext.ComponentQuery



mono blaine
27 Sep 2011, 7:10 AM
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.

mono blaine
27 Sep 2011, 7:33 AM
It appears you have to register an xtype for Ext.grid.RowEditor:


Ext.ComponentManager.registerType("hede", Ext.grid.RowEditor);

then you can query it:


Ext.ComponentQuery.query("hede");

castitas
9 Mar 2012, 3:15 PM
The roweditor fires its events through the grid, so if you put


this.control({
'myGrid':{
roweditorevent: this.fn()
}
...

in your controller, you can catch any of the roweditor events.

mono blaine
17 Mar 2012, 12:52 PM
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.

nick_laros
26 Nov 2012, 3:36 AM
hei mono blaine,

I'm trying to use


Ext.ComponentManager.registerType("hede", Ext.grid.RowEditor);
but

Ext.ComponentQuery.query("hede");return undefined to me :((

mono blaine
26 Nov 2012, 4:24 AM
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.

nick_laros
27 Nov 2012, 6:58 PM
yup, I've been searching everywhere but no luck finding one solution..

nick_laros
29 Nov 2012, 6:21 PM
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:

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:

Ext.ComponentQuery.query('numberfield[id=costumerName]')[0]
finally it works.. if anyone have a better suggestion please let me know..
this is my 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);
}
});