4

内部にいくつかのタブがあるタブパネルがあります。タブで iconCls プロパティを使用して、各タブにタイトルと一緒に画像を表示しています。私はfam fam fam 16x16 アイコンを使用していますが、デフォルトのタブ スペースでは上部/下部の画像が切り取られています。

マージンを変更してアイコンのクラスをいじってみましたが、役に立ちません。ドキュメントによると、ext.tab.Tab コンポーネントにはパディングと高さのプロパティがありますが、それらを設定しても実行時にタブに影響はありません。

Ext.define('AM.view.Tab.Standard', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.TabStandard',

    region: 'center', // a center region is ALWAYS required for border layout
    deferredRender: false,
    activeTab: 0,     // first tab initially active

    initComponent: function() {
      this.items = this.buildItems();  

      this.callParent(arguments);    
    },

    buildItems: function(){
      var items = 
            [
                {
                    padding: 10, // nope :(
                    title: 'Gantt',
                    autoScroll: true,
                    iconCls: 'gantt icon',
                }, 
                {
                    height: 10, // nope :(
                    title: 'Logs',
                    autoScroll: true,
                    iconCls: 'logs icon',
                },
                {
                    title: 'Help',
                    autoScroll: true,
                    iconCls: 'help icon',
                }
            ];
        return items
    },
});

これらのプロパティがどのように機能するかを誤解しているのかもしれませんが、ページ上のすべてが同じように見えます。

編集: アコーディオン パネルとして使用する場合、「見出し」(+/- の付いたバー) で同じ問題が発生しているようです。

4

1 に答える 1

2

tabPanelのtabBarプロパティを使用して、タブ パネルのタブをカスタマイズできます。

var tabpanel = new Ext.tab.Panel({
   plain: true,
   region: 'center',
   tabBar: {
        defaults: {
            flex: 1, // if you want them to stretch all the way
            height: 20, // set the height
            padding: 6 // set the padding
         },
        dock: 'top'
    }

});

于 2013-06-18T21:19:41.443 に答える