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

以下のように、flex プロパティの代わりに width:x% を指定して解決しました。

 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 に答える