Question

I have done split view using ‘hbox’ layout, as below:

Ext.define('Sencha.view.Blog', {
extend: 'Ext.Panel',
xtype:'blogpage',

config:{
    layout:'fit',
    width:'100%',
    height:'100%',
    title: 'Blog',
    iconCls: 'star',
    style:'background-color: red;',

    items:[
            { 
                xtype:'list',
                id:'thelist',
                //fullscreen:false,
                //docked:'left',
                style:'background-color: blue;',
                height:'100%', width:'20%',
                /*itemTpl: '{title}',
                store: {
                        fields: ['title','url'],
                        data: [
                            {title:'Abc1', url: 'url1'},
                            {title:'Abc2', url: 'url2'},
                            {title:'Abc3', url: 'url3'},
                            {title:'Abc4', url: 'url4'},
                        ]
                        }*/
                        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'Shawshank Redemption', number: 5},
                {name: 'SuperBad', number: 3},
                {name: 'God Father', number: 5},
                {name: 'Forest Gump', number: 4.5},
                {name: 'A Beautiful Mind', number: 5},
            ]
        },

        itemTpl: '{name}'
            },
            {
                xtype:'panel',
                height:'100%',
                id:'urmilPanel',
                left:'21%',
                width:'79%',
                html:'Urmil\'s Panel',
                            config:{
            layout:{
                type: 'vbox'
            }
        }
            }
        ]
}
});

On click of an list item in the left side panel of the split view, i am displaying respective list in the right side panel of the split view in controller as below,

onitemtapList: function(list, index, target, record, e, eOpt)
{
    var thePanel = Ext.getCmp('urmilPanel');
    thePanel.removeAll(true);
    thePanel.add([
        {
            xtype: 'button',
            style: {
            'padding': '0.5em'
            },
            flex: 1,
            html: '<font> Table of content </font>',
            listeners:{
            tap: function(){
            console.log("button tapped............");
            }
            }
        },
        {
            xtype: 'list',
            store: {
                fields: ['name'],
                data: [
                    {name: 'BOM'},
                    {name: 'PLM'},
                    {name: 'Drawings'},
                    {name: 'History'},
                    {name: 'Preferences'},
                    {name: 'Import Files'}
                ]
            },
            flex: 1,
            style: {
            'height': '150'
            },

            itemTpl: '<div><img src="res/images/help_question_icon.png" align="absmiddle"/><font align="absmiddle" style="padding: 0.5em;">{name}</font><img src="res/images/help_arrow_hov.png" style="float: right;"/></div>',
            listeners: {
            itemtap: function(list, record){
            if(record.get('name') == 'BOM'){
                console.log("BOM clicked.........");
            }
            }
            },
        }
    ]);
}

I am able to tap the button, but not able to tap the list item below the button in the right side panel of split view.

Please help me in resolving above issue.

Answer 1

I resolved it by giving width:x%, instead of flex property, as below:

 thePanel.add([
    {
        xtype: 'button',
        style: {
        'padding': '0.5em'
        },
        width: 10%,
        html: '<font> Table of content </font>',
        listeners:{
        tap: function(){
        console.log("button tapped............");
        }
        }
    },
    {
        xtype: 'list',
        store: {
            fields: ['name'],
            data: [
                {name: 'BOM'},
                {name: 'PLM'},
                {name: 'Drawings'},
                {name: 'History'},
                {name: 'Preferences'},
                {name: 'Import Files'}
            ]
        },
        width: 90%,
        style: {
        'height': '150'
        },

        itemTpl: '<div><img src="res/images/help_question_icon.png" align="absmiddle"/><font align="absmiddle" style="padding: 0.5em;">{name}</font><img src="res/images/help_arrow_hov.png" style="float: right;"/></div>',
        listeners: {
        itemtap: function(list, record){
        if(record.get('name') == 'BOM'){
            console.log("BOM clicked.........");
        }
        }
        },
    }
]);