web-dev-qa-db-ja.com

ExtJSパネルの「ツール」ボタンに使用できるアイコン

パネルの「タイトルバー」で使用されるアイコンを設定するにはどうすればよいですか？多分私は自分で画像を追加する必要がありますが、もしそうならどこかでそれを定義または構成する必要があると思いますか？

{
    xtype: 'treepanel',
    title: 'Projects',
    width: 200,
    store: Ext.data.StoreManager.lookup('projects'),
    tools: [
        {
            type: 'add', // this doesn't appear to work, probably I need to use a valid class
            tooltip: 'Add project',
            handler: function() {
                console.log('TODO: Add project');
            }
        },
        ...
    ]
},
extjs4
13
jm2

タイプconfigを使用して指定できる25個のアイコンのセットがあります。チェック http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

シンボルを追加するには

tools:[{
    type:'plus',
    tooltip: 'Add project',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // Add logic
    }
}]

指定されたtype： 'add'はリストにありません

23
Jom

独自のツールタイプを追加して、独自のイメージを割り当てることができるようにする場合は、次の操作を実行できます。

Cssファイルにcssクラスを追加します。

.x-tool-mytool { background-image: url(path_to_your_image_file) !important; }

次に、ツールで、タイプとして「mytool」を使用します。

            {
                type:'mytool',
                tooltip: 'This is my tool',
                handler: function(event, toolEl, panel){
                    // my tool logic
                }
            }

Cssクラスのサフィックスに使用したのと同じ名前をツールのタイプに使用していることを確認してください。

15
Farish

extJSのドキュメントによると、これらの事前定義されたタイプが利用可能です：

collapse, expand, maximize, minimize, resize, restore, move, close 

minus, plus, prev, next, pin, unpin, search, toggle, refresh

save, print, gear, help

right, left, up, down

好きなタイプを入力できます：

{type: 'YOURTYPE'}

15pxアイコン-またはできればアイコンスプライトを提供する

（background-positionは確かに単一のアイコンではなく、アイコンスプライトに適用されます）：

.x-tool-img.x-tool-YOURTYPE{
   background: url('../images/custom_tool_sprites.png') no-repeat 0 0;
}

ソース： Ext.panel.Tool-cfg-type 、 codefx.biz 。

4
Martin Zeitler

「セットアイコン」ではなく、「パネルのタイトルバーで使用されるセットボタン」を意味していると思います。 buttonsではなく、Panelのtools configを使用できます。

buttons: [{ 
   text: 'Add',
   tooltip: 'Add project',
   handler: function() {
      console.log('TODO: Add project');
   }
}]

bbar（ボトムバー）、fbar（フッター）、tbar（トップ）、lbar（左）、rbar（右）はツールバーの位置を示します。小さな注意点の1つは、buttonsの構成オブジェクトのデフォルトのxtypeがbuttonであるため、明示的に指定する必要がないことです。

1
U and me