Can't target the list with query.down()

[DBrumec]

Hello,
I have a modern app in extjs 6.2 that I'm building with Sencha Architect. I'm trying to target grid or list store under the same component. The issue is when i write this code:

var main = Ext.ComponentQuery.query('mainview')[0];
var tab = main.down('#tabPanelMainView');
var active = tab.getActiveItem();


if(Ext.os.deviceType === 'Desktop')
   var store = active.down('grid').getStore();
else
   var store = active.down('list').getStore();




console.log(store);
store.load({
    params: {
        page: 1,
        start: 0,
        limit: 25
    }
});

I always get grid store and as that is not loaded it doesn't refresh properly.

Anyone encountered this issue before?

Thanks in advance,
DB

[sencha.santa]

Hi DBrumec,

Try getActiveTab() instead of getActiveItem()

[DBrumec]

Hi sencha.santa

getActiveTab() is not a function in modern in tabpanel.

The problem lies as I said in the fact that grid and list are child components of a panel. It seems that grid superseeds the list. If I have only the list the down('list') part works.

[sencha.santa]

Hi DBrumec,

oops!! sorry i missed that. I know you might have tried this but just to confirm. Have you checked by keeping a break point in the else part whether the control is reaching there.

[sencha.santa]

I feel this is due to the var, Try rewriting the code like this

var main = Ext.ComponentQuery.query('mainview')[0];
var tab = main.down('#tabPanelMainView');
var active = tab.getActiveItem();
var store;

if(Ext.os.deviceType === 'Desktop')
store = active.down('grid').getStore();
else
store = active.down('list').getStore();




console.log(store);
store.load({
params: {
page: 1,
start: 0,
limit: 25
}
});

[DBrumec]

Yes I've tried that and the break point is reaching the "list" part. Thats why I'm confused why I can't find the first instance of the list component through xtype. It works for every other component I use (form, tabpanel, filiefields, textfields, number fields, textareas etc.)

[DBrumec]

Just did a completely basic standalone project to mimic this behaviour

Ext.define('App.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',


    requires: [
        'App.view.MyPanelViewModel',
        'Ext.Toolbar',
        'Ext.Button',
        'Ext.grid.Grid',
        'Ext.grid.column.Column',
        'Ext.XTemplate'
    ],


    viewModel: {
        type: 'mypanel'
    },
    title: 'My Panel',
    defaultListenerScope: true,


    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'MyButton',
                    listeners: {
                        tap: 'onButtonTap'
                    }
                }
            ]
        },
        {
            xtype: 'grid',
            height: '40%',
            width: '100%',
            columns: [
                {
                    xtype: 'gridcolumn',
                    width: 70,
                    dataIndex: 'string',
                    text: 'String'
                }
            ]
        },
        {
            xtype: 'list',
            height: '100%',
            itemTpl: [
                '<div>List Item {string}</div>',
                '<div>DB</div>'
            ]
        }
    ],


    onButtonTap: function(button, e, eOpts) {
        var frm = button.up('panel');
        var list = frm.down('list');
        console.log(list);
        Ext.Msg.alert('rror', list.xtype);
    }


});

The console log and the alert returns grid.

[evant]

Grid is a subclass of list, so the grid is a list.

See the docs about shallow queries: http://docs.sencha.com/extjs/6.2.1/m...nentQuery.html

[DBrumec]

@evant
thanks for explainign this. So if I change the order of the components I'd get the right one. good to know. Thanks