2

コンテキスト:ボランティアがキャンプ データベースを管理するのを支援する ExtJS アプリケーションを作成しています。緊急情報、食事の要件、キャビンの割り当てが含まれています。ボランティアがすぐに手に取れるようにユーザー フレンドリーにしたいので、アプリケーションの主なアクションに注意を引くために、タブを大きくする必要があると判断しました。

問題:タブの高さを変更する方法がわかりません。

これまでの作業:

  • タブ パネルの tabBar プロパティを設定しようとしましたが、タブのサイズが変更されず、スタイルが奇妙に見えました
  • フォーラムを調べたところ、CSS の変更を提案された人もいましたが、例はありませんでした

手伝ってくれますか？これは私が達成したいものです：

http://tinypic.com/r/sltr9g/7

http://postimage.org/image/10x22n8ec/

4

3 に答える 3

13

私は解決策を見つけたと思います！

使用している Ext.tab.Panel の 'cls' プロパティが設定されていることを確認してから、以下をカスタム CSS ファイルに貼り付けます。

.MainPanel .x-tab-bar-strip {
    top: 40px !important; /* Default value is 20, we add 20 = 40 */
}

.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important; /* Default value is 23, we add 20 = 43 */
    border: 0 !important; /* Overides the border that appears on resizing the grid */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 33px !important; /* Default value 13, we add 20 = 33 */
    line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}

これにより、タブが大きくなり、テキストが中央揃えになりますが、理想的にはアイコンも中央揃えになります。

于 2011-08-31T06:49:22.347 に答える
2

Compassで新しいExtJS4テーマを使用すると、次のように設定できます。

$tab-height: 40px !default;

でappname/resources/sass/my-ext-theme.scss。

発生する唯一の問題は、タブバーのバグの下に余分なスペースがあることです。これは、カスタムテーマを使用するときに常に表示されます。しかし、ここで説明されているように、CSSの1つに設定することで、これを簡単に解決できます。

.x-tab-bar
{
    position: absolute;
}

ExtJSresources/themes/stylesheets/ext4/default/variables/_tabs.scssパッケージのファイルには、タブのサイズと色をカスタマイズするための他の便利な変数があります。

于 2011-12-28T16:01:14.940 に答える
0

extjs4 を使用している場合は、SASS と Compass を使用してextjsスタイルシートを変更してください。

以下の変数を my-custom-theme.scss に追加するだけで、タブの高さを変更できます。

$tab-height: 40px;
于 2012-10-09T08:30:26.200 に答える