탭의 제목에 콤보 박스를 배치하는 방법은 무엇입니까?

Question

탭 제목에 콤보 박스 (콤보가 더 좋을 경우 더 좋음)를 표시 할 수 있습니까?

나는 an example on jsfiddle 만든하지만 이러한 문제가 있습니다 :
1. (나는이 고정 될 수있다 생각 콤보의 옵션 목록 (마우스 클릭이 작동하지 않습니다)
2. 탭의 높이가 잘못을 표시 할 수 없습니다가 콤보에 높이를 적용하여).

샘플 코드 : 귀하의 질문에 대한

new Ext.TabPanel({ 
    renderTo: 'tab-with-combo', 
    activeTab: 0, 
    items:[ 
     { 
      title: 'First tab ' + 
       '<select>' + 
        '<option>Option 1</option>' + 
        '<option>Option 2</option>' + 
       '</select>'}, 
     {title: 'Second tab'} 
    ] 
}); 

Answer 1

감사합니다,이 (예 here입니다) 제대로 작동 : 대답에 대한

var comboId = Ext.id(); 
new Ext.TabPanel({ 
    cls: 'tab-panel-with-combo', 
    renderTo: 'tab-with-combo', 
    activeTab: 0, 
    items:[ 
     { 
      title: '<div class="tab-title" style="float: left; padding-right: 5px;">First tab with a long name</div> ' + 
        '<div style="float: right;" id="' + comboId + '" ></div>', 
      closable: true, 
      html: 'Content of the first tab' 
     }, 
     { 
      title: '<div class="tab-title">Second tab</div>', 
      closable: true, 
      html: 'Content of the second tab' 
     } 
    ], 
    listeners: { 
     afterrender: function() { 
      var store = new Ext.data.ArrayStore({ 
       fields: ['abbr', 'case_name'], 
       data : [ 
        ['one', 'Case #1'], 
        ['two', 'Case #2'], 
        ['three', 'Case #3'] 
       ] 
      }); 

      new Ext.form.ComboBox({ 
       store: store, 
       displayField:'case_name', 
       editable: false, 
       typeAhead: false, 
       selectOnFocus:false, 
       mode: 'local', 
       forceSelection: true, 
       triggerAction: 'all', 
       emptyText:'Select a case...', 
       renderTo: comboId 
      }); 
     } 
    } 
}); 

Answer 2

답변 :

1. Tabpanel 구성 요소가 preventDefault 탭을 클릭의 이벤트입니다, 그래서 우리는 onStripMouseDown 방법을 수정해야합니다.

2. 우리가 title 속성에 무엇인가를 정의하면 extjs는 특별한 스타일을 가진 span.x-tab-strip-text html 요소에 넣을 것입니다. 따라서 우리는 콤보 박스를이 탭 다음에 추가해야합니다.

코드 : @ Alexander.Berg 답변

new Ext.TabPanel({ 
    renderTo : 'tab-with-combo', 
    activeTab : 0, 
    items : [{ 
      title : 'First tab ', 
      listeners : { 
       afterrender : function (panel) { 
        //the needed tabEl 
        var tabEl = panel.findParentByType('tabpanel').getTabEl(panel); 
        var tabStripInner = Ext.fly(tabEl).child('span.x-tab-strip-inner', true); 
        //we need that for have the combobox in the same line as the text 
        Ext.fly(tabStripInner).child('span.x-tab-strip-text', true).style.float = 'left'; 
        //create the combobox html element 
        var combo = document.createElement("select"); 
        var opt1 = document.createElement("option"); 
        opt1.innerHTML = 'Option 1'; 
        var opt2 = document.createElement("option"); 
        opt2.innerHTML = 'Option 2'; 
        combo.appendChild(opt1); 
        combo.appendChild(opt2); 
        combo.style.float = 'left';     
        //add the combobox to the tab 
        tabStripInner.appendChild(combo); 
       } 
      } 
     }, { 
      title : 'Second tab' 
     } 
    ], 

    //this is the tab's click handler 
    onStripMouseDown : function (e) { 
     if (e.button !== 0) { 
      return; 
     } 
     var t = this.findTargets(e); 
     if (t.close) { 
      //preventDefault needed to move here 
      e.preventDefault(); 
      if (t.item.fireEvent('beforeclose', t.item) !== false) { 
       t.item.fireEvent('close', t.item); 
       this.remove(t.item); 
      } 
      return; 
     } 
     if (t.item && t.item != this.activeTab) { 
      this.setActiveTab(t.item); 
     } 
    }, 
});