可點擊的列/酒吧/水平佈局與sencha

Question

我有一個問題，試圖讓一個列可點擊sencha。我嘗試了各種方法，將文本放在容器，組件等中，我無法得到它對點擊作出反應。

這是代碼片段。查看聽衆，當我點擊文本或佈局欄時，它不起作用。請幫忙！

app.views.test = Ext.extend(Ext.Panel, { 
    scroll: "vertical", 
    id: 'test',  

    initComponent: function() {  

     var testbar = { 
      layout : { 
       type : 'vbox', 
       align : 'start', 
       pack : 'start' 
      }, 
      width : '60%', 
      items : [{ 
       html : 'press this column 
       bar : '5 0 0 15', 
       width : '100%' 
      }], 
      listeners: { 
       itemtap : function() { 
        console.log("goto next"); 
       } 
      } 
     }; 

     var testViews = { 
      items : [ testbar ] 
     };    

     this.items = [ testViews ]; 

     app.views.test.superclass.initComponent.apply(this, arguments); 
    }, 

    onSelect: function(sel, records){ 
     if (records[0] !== undefined) { 
     } 
    } 
}); 

Answer 1

至於回答您最近的評論，不，如果您不需要大多數面板的功能，vbox可能會矯枉過正。我會建議只使用純dom。純DOM的好處在於它可以完全控制你需要的東西。如果你使用vbox，你最終會否定或禁用它提供的一些CSS /功能。

因此，首先，這是純粹的DOM方法：link to example

//Create a simple namespace. Habit :) 
Ext.ns('NS'); 

/** 
* This is the customized menu component 
* Usage: bla bla.. 
*/ 
NS.Menu1 = Ext.extend(Ext.Component, { 

    /** 
    * @cfg menu 
    * An array of menu items to be rendered into the component 
    */ 
    menu: [], 

    initComponent: function() { 
     NS.Menu1.superclass.initComponent.call(this); 

     //We create our own customized event, so users can hook events onto it 
     this.addEvents({ 

      /** 
      * @event menuclick 
      * Fires when the menu is clicked 
      * @param {NS.Menu1} cp this component 
      * @param {Menu} m The menu item 
      * @param {Ext.Element} a The anchor element 
      * ... or whatever you want to pass 
      */ 
      menuclick: true 
     }); 

     //We hook an afterrender event here, so we could know 
     //when will be our el be rendered. 
     this.on('afterrender', this.onAfterRender, this); 
    }, 

    onAfterRender: function() { 

     var me = this; 

     //Let's do all the fancy stuff here: 
     Ext.each(me.menu, function(m) { 

      //el property is always there as long as you subclass 
      //Ext.Component. It's the outermost div of the component. 
      //We create multiple single anchors here (of course ul/li/a is better) 
      var a = me.el.createChild({ 
       tag: 'a', //so we can have :hover supports from crappy IE 
       html: m.text, //or anything you like 
       cls: 'item' //and the class to style it 

      //then we hook 'click' even to this anchor 
      }).on('click', function() { 

       //Then do whatever you like here 
       Ext.get('output1').update(m.text); 

       //Or even firing your own customized events, whatever you like 
       me.fireEvent('menuclick', me, m, a); 

       //or whatsoever... 
      }); 
     }); 
    } 
}); 

//Finally, testing it out! 
new NS.Menu1({ 
    renderTo: 'menu1', 
    menu: [{ 
     text: 'This is the first menu' 
    },{ 
     text: 'This is the 2nd menu' 
    },{ 
     text: 'This is the last menu' 
    }] 
}).on('menuclick', function(cp, m) { 
    Ext.get('output2').update(m.text); 
}); 

然後，這是VBOX的方式。注意我是如何在一個循環中創建它們：go to example

/** 
* This is the column bars with clickable areas 
*/ 
Ext.ns('NS'); 

NS.Menu2 = Ext.extend(Ext.Panel, { 

    /** 
    * @cfg menu 
    * An array of menu items to be rendered into the component 
    */ 
    menu: [], 

    border: false, 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 

    initComponent: function() { 

     var me = this; 

     //Same thing, you can do event hook here: 
     me.addEvents('menuclick'); 

     me.items = []; 

     //Create all the boxes as you like 
     Ext.each(me.menu, function(m) { 
      me.items.push({ 
       html: m.text, 
       bodyCssClass: 'item', 
       bodyStyle: 'padding-bottom: 0px;margin-bottom: 0px;', 
       listeners: { 
        afterrender: function(p) { 
         //As you can see, we hook the afterrender event so 
         //when your panels (each individual panels) are created, 
         //we hook the click event of the panel's root el. 
         p.el.on('click', function() { 
          Ext.get('output1').update(m.text); 

          //Fires event 
          me.fireEvent('menuclick', me, m, p.el); 
         }); 
        } 
       } 
      }); 
     }); 

     NS.Menu2.superclass.initComponent.call(this); 
    } 
}); 

new NS.Menu2({ 
    renderTo: 'menu2', 
    height: 300, 
    menu: [{ 
     text: 'This is the first menu' 
    },{ 
     text: 'This is the 2nd menu' 
    },{ 
     text: 'This is the last menu' 
    }] 
}).on('menuclick', function(cp, m) { 
    Ext.get('output2').update(m.text); 
}); 

他們兩人長相相似，只是VBOX的方式是有點overkilling，因爲它處理了一點點東西，比用純DOM。檢查兩個生成的DOM節點以查看差異。

這是實施例1中產生的DOM節點：

<div id="ext-comp-1001"> 
    <a class="item" id="ext-gen3">This is the first menu</a> 
    <a class="item" id="ext-gen4">This is the 2nd menu</a> 
    <a class="item" id="ext-gen5">This is the last menu</a> 
</div> 

這是例子2：

<div id="ext-comp-1001" class=" x-panel x-panel-noborder"> 
    <div class="x-panel-bwrap" id="ext-gen3"> 
     <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder x-box-layout-ct" id="ext-gen4" style="height: 300px; "> 
      <div class="x-box-inner" id="ext-gen6" style="width: 836px; height: 300px; "> 
       <div id="ext-comp-1002" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 0px; "> 
        <div class="x-panel-bwrap" id="ext-gen7"><div class="x-panel-body item x-panel-body-noheader" id="ext-gen8" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the first menu</div> 
       </div> 
      </div> 
      <div id="ext-comp-1003" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 31px; "> 
       <div class="x-panel-bwrap" id="ext-gen10"> 
        <div class="x-panel-body item x-panel-body-noheader" id="ext-gen11" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the 2nd menu</div> 
       </div> 
      </div> 
      <div id="ext-comp-1004" class=" x-panel x-box-item" style="width: 836px; left: 0px; top: 62px; "> 
       <div class="x-panel-bwrap" id="ext-gen13"> 
        <div class="x-panel-body item x-panel-body-noheader" id="ext-gen14" style="padding-bottom: 0px; margin-bottom: 0px; width: 824px; height: 24px; ">This is the last menu</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

明白我的意思？