Results 1 to 9 of 9

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

  1. #1
    Sencha User
    Join Date
    Jun 2015
    Posts
    22

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

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

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

  3. #2

    Default

    Hi DBrumec,

    Try getActiveTab() instead of getActiveItem()

  4. #3
    Sencha User
    Join Date
    Jun 2015
    Posts
    22

    Default

    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.

  5. #4

    Default

    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.

  6. #5

    Default

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

  7. #6
    Sencha User
    Join Date
    Jun 2015
    Posts
    22

    Default

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

  8. #7
    Sencha User
    Join Date
    Jun 2015
    Posts
    22

    Default

    Just did a completely basic standalone project to mimic this behaviour
    Code:
    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.

  9. #8
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    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
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  10. #9
    Sencha User
    Join Date
    Jun 2015
    Posts
    22

    Default

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

Similar Threads

  1. Dragging list of valuesinto target panel
    By sameerkumar in forum Ext: Q&A
    Replies: 1
    Last Post: 31 Aug 2012, 10:04 AM
  2. How do I target a panel inside of a nested list to update with remote data?
    By victorbstan in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 23 Nov 2010, 8:30 AM
  3. Paging Toolbar: How Can We Send Target Page As Query Param To Data Store
    By metoikos in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 23 Apr 2009, 8:41 AM
  4. [2.1] Incorrectly ordered target list in nested Drag + Drop
    By qwerti in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Sep 2008, 2:24 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •