0

我已经使用“hbox”布局完成了拆分视图，如下所示：

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

单击拆分视图左侧面板中的列表项时，我将在控制器中拆分视图的右侧面板中显示相应的列表，如下所示，

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.........");
            }
            }
            },
        }
    ]);
}

我可以点击按钮，但无法点击拆分视图右侧面板中按钮下方的列表项。

请帮助我解决上述问题。

4

1 回答 1

2

我通过给出 width:x% 而不是 flex 属性来解决它，如下所示：

 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.........");
        }
        }
        },
    }
]);
于 2012-09-01T08:50:06.013 回答