0

この例をローカルに埋め込むことができた人はいますか?

ローカル プロジェクトで同じことをしようとすると、タブの右側の部分だけが表示され、左側の部分が非表示になります。グリフではなくiconClsを使用しています。

問題は、これを適切にコンパイルできなかったことだと思います

@include extjs-tab-panel-ui(
    $ui: 'ナビゲーション',
    $ui-tab-background-color: 透明、
    $ui-tab-background-color-over: #505050,
    $ui-tab-background-color-active: #303030,
    $ui-tab-background-gradient: 'なし',
    $ui-tab-background-gradient-over: 'なし',
    $ui-tab-background-gradient-active: 'なし',
    $ui-tab-color: #acacac,
    $ui-tab-color-over: #c4c4c4,
    $ui-tab-color-active: #fff,
    $ui-tab-glyph-color: #acacac,
    $ui-tab-glyph-color-over: #c4c4c4,
    $ui-tab-glyph-color-active: #fff,
    $ui-tab-glyph-opacity: 1,
    $ui-tab-border-radius: 0,
    $ui-tab-border-width: 0,
    $ui-tab-inner-border-width: 0,
    $ui-tab-padding: 24px,
    $ui-タブ-マージン: 0,
    $ui-tab-font-size: 15px,
    $ui-tab-font-size-over: 15px,
    $ui-tab-font-size-active: 15px,
    $ui-tab-line-height: 19px,
    $ui-tab-font-weight: 太字、
    $ui-tab-font-weight-over: 太字、
    $ui-tab-font-weight-active: 太字、
    $ui-tab-icon-width: 24px,
    $ui-tab-icon-height: 24px,
    $ui-bar-background-color: #404040,
    $ui-bar-background-gradient: 'なし',
    $ui-bar-padding: 0,
    $ui ストリップ高さ: 0
);

このスクリプトを extjs テーマ内に追加してコンパイルするにはどうすればよいですか? 多分テーマの再構築が必要ですか？

4

1 に答える 1

2

私は ExtJS の専門家ではありません。ExtJS 5 を学習して、プロジェクトの 1 つに実装しています。セットアップでサイド ナビゲーション パネルを動作させることができます。手順:

  • senchacmd を使用してアプリを作成します (アプリ生成オプション付き)。
  • senchacmd watch コマンドでサーバーを起動します。

  • app/view/tab/ ディレクトリに「NavigationTabs.js」という名前のビュー「NavigationTabs」を作成し、以下のコードを配置します。

    Ext.define('MyProject.view.tab.NavigationTabs', {
  extend: 'Ext.tab.Panel',
  xtype: 'navigation-tabs',

  //<example>
  exampleTitle: 'Navigation Tabs',
  otherContent: [{
    type: 'Styles',
    path: 'sass/src/view/tab/NavigationTabs.scss'
  }],
  //</example>

  height: 400,
  width: 600,


  ui: 'navigation',
  tabPosition: 'left',
  tabRotation: 0,
  tabBar: {
    layout: {
        pack: 'center'
    },
    border: false
  },

  defaults: {
    iconAlign: 'top',
    bodyPadding: 15
  },

  items: [{
    title: 'Home',
    glyph: 72,
    html: "Some text"
  }, {
    title: 'Users',
    glyph: 117,
    html: "Some other text"
  }, {
    title: 'Groups',
    glyph: 85,
    html: "Some more text"
  }, {
    title: 'Settings',
    glyph: 42,
    html: "Extra text"
  }]
});

  • 次に、sass/src/view/tab/ ディレクトリに、NavigationTabs.scss という名前のファイルを作成し、sass コード (質問で指定したもの) をこのファイルに配置します。

  • app/view/main/ ディレクトリにある Main.js ファイルで、項目リストに次の内容を含めます。

    items: [
{
  ...
  ...
},
{
  region: 'west',
  xtype: 'navigation-tabs',
  reference: 'navigation'
}],

  • アプリと scss がコンパイルされるのを待ちます (sencha-cmd watch コマンドは自動的にコードをコンパイルします)。

  • ブラウザーでアプリを更新し、これが機能するかどうかを確認します。

うまくいけば、これは役に立ちます。

注: 上記のコードは ExtJS5 Kitchen Sink の例から取られています。

于 2014-08-06T12:10:17.047 に答える