3

タブのタイトルにコンボボックスを表示することはできますか?

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

2 に答える 2

3

質問への回答:

  1. Tabpanelコンポーネントはタブ クリック時のイベントであるため、メソッドpreventDefaultを変更する必要があります。onStripMouseDown

  2. プロパティで何かを定義するとtitle、extjs はそれをspan.x-tab-strip-text特別なスタイルを持つ html 要素に配置します。したがって、タブのこの要素の後にコンボボックスを追加する必要があります。

コード：

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);
        }
    },
});
于 2013-09-03T14:14:07.547 に答える
0

@Alexander.Bergの回答に感謝します。これは正しく機能します（例はこちら）：

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
            });
        }
    }
});
于 2014-03-04T15:12:40.983 に答える