ExtJs border layout item selection help needed.

Question

I am trying to develop an application using Ext JS. so far I have developed a viewport with border layout and I whave north region, south region done. in the center region i have multiple panel such 1. for search the data. 2. input the data task list (a form) and on the next panel to this I also would like to display the grid and has the dynamic behavior of item double click. I became successful to put everything together.

on the other hand I have defined the controller where it listens the item double click on the grid. eg:

this.control({
    'viewport>userlist': {
        itemdblclick: this. editUser,
    },
.......

so if i put my userlist inside the viewport in the center region, along with two other panel the selection doesn't work. need suggestions.

following is the code i have:

launch : function() {
    Ext.create('Ext.container.Viewport', {
        layout : 'border',
        autoScroll : true,
        items : [{
            region: 'north',
            .......
        },{
            region: 'west',
            ..............
        },{
            region: 'center',
            items:[{
                xtype: 'panel',
                ..............
            },{
                xtype: 'panel',
                ............
            },{
                xtype: 'userlist'//this is what i like to have and my controller should respond the item click. 
            }]
        }]

got stuck!!!! help would be highly Appreciated!!!

kevhender kevhender · Accepted Answer · 2013-06-25T20:55:41

It looks like your reference is not defined correctly. Since userlist is embedded inside a panel (your center region), using viewport > userlist won't work unless you either (1) include the containing panel or (2) remove the >:

this.control({
    'viewport > panel > userlist': {
        itemdblclick: this.editUser,
    },
.......

or:

this.control({
    'viewport userlist': {
        itemdblclick: this.editUser,
    },
.......

This is because the > in Ext.ComponentQuery looks only for direct children in the component tree. See here for the docs: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery

ExtJs border layout item selection help needed.

1 Answers