煎茶觸摸2 - 無法選擇列表項

Question

我一直在使用「橫向盒」的佈局，按以下步驟進行拆分視圖：

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

我能夠點擊按鈕，但不能夠利用在右側面板的按鈕下方的列表項拆分視圖。

請幫我解決上述問題。

Answer 1

我解決它通過給寬度：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........."); 
     } 
     } 
     }, 
    } 
]);