2

Ext JS 4を使用して大規模なRIAアプリケーションを開発しています。index.html内には、次の定義があります。

<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">

問題
は提供されたコードにのみindex.css存在しますが、私のアプリケーションの各ビューには、独自のスプライト/画像を使用する独自のCSSスタイルシートがあります（例として提供されたコードを追加user.cssしました）。documents.cssそのすべてが、縮小されていない大量のCSSファイルに成長し、アプリケーションの読み込み時間が大幅に遅くなります。
また、Ext JS'ux'コンポーネントの一部のスタイルはext-all.css（GridFilters.cssおよびRangeMenu.css提供されたコードに）含まれていません。

これらすべてのCSSファイルを1つのファイルに圧縮するスクリプトを書き留めることはできますが...

質問

  1. Ext JS 4アプリケーションをスタイリングする正しい方法はどれですか？たぶん、SCSSファイルを作成してそこですべてのスタイリングを行い、毎回コンパイルcompass compileしてCSSファイルを作成して開発を行う必要がありますか？
  2. 標準のExtJS4ディストリビューションに含まれる「ux」コンポーネントのスタイルを含める方法はありますか？ext-all.css'uxコンポーネントのようなもの（のようなものext-ux-all.css）

多くの人がExtJSを使用して優れたアプリケーションを作成し、そのような問題を自分で考えたり解決したりしてくれることを願っています。このトピックに関する知識の共有に感謝します。

4

2 に答える 2

1

私はあなたと同じような状況にあります。

私がしていることは、最初にextcssファイルを含めることです。

<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">

次に、すべてのアプリのcssがコンパスを使用して生成されます。したがって、単一のcssファイルにコンパイルされる多数のscssファイルがあります。compass watchscssファイルが変更されるたびにcssがコンパイルされるように使用できます。

コンパスとsass/scssに慣れると、プレーンなcssファイルを正当化するのは非常に困難です。コンパスとsassは、より優れたクロスブラウザーcssを生成し、scssファイルはプレーンなcssと比較して保守とカスタマイズがはるかに簡単です。

uxcssも。あまり心配する必要はありませんが、2つの選択肢があります。

  • ux cssファイルをメインのscssファイルにインポートするだけです（この回答を参照してください）。
  • そこにある多数のcssユニファイア/マージャー/ミニファイアの1つを使用してください。
于 2013-01-25T11:15:23.073 に答える
0

テーマを作成することは、コードを適切に維持できる唯一の方法であり、最適化されたcssをデプロイするための良い方法です。

secnhaのミックスイン（現在はドキュメントに部分的に記載されています）を使用して、ボタンやパネルなどの複数の外観を作成できます。あなたはそれがどのように機能するかを理解するのに少し苦労するかもしれませんが、物事をうまくやる唯一の方法です。

あなたは彼らのドキュメント（ガイドとビデオ）で良いリソースを見つけるでしょう。また、彼らのscssソースは良いソースです。

于 2013-01-27T21:19:02.457 に答える