2016-06-29 7 views
0

Webページの左側にExtJSを使用して垂直ナビゲーションメニューを作成しようとしています。私はhttp://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/でサンプルダッシュボードに刺激を与えます。グーグルでもサンプルコードは提供されていませんでした。誰かがサンプルコードを手伝うことができれば、とても感謝しています。Ext JSを使用した垂直ナビゲーションメニュー(ページの左側)

答えて

0

たとえば、この機能を実現するためにタブパネルを使用していたようです。

タブパネルの内側に2つのconfigs tabPosition: 'left'とtabRotation:0を追加すると、左側のタブが表示されます。そして、スタイルを適用するには、clsまたはui configsを使用します。

また、Ext JS Kitchen Sinkの例があります。下のリンクをチェックしてください:次のように当時http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#side-navigation-tabs

0

、私はそれをやった:

あなたが(「要素を調査」)HTMLのソースコードに見れば、あなたは左側部分HTMLが

を開始していることがわかり xtype:'treelist'に向けてあなたを指して
<div class="x-treelist ... 

(ちょうどx-panelようxtype:'panel'のためのものであり、x-containerが​​のためです)。

一般的な使い方について知っておく必要があるものはすべてドキュメントに記載されています。煎茶は、この特殊な場合にはそれをやった、あなたのブラウザのコンソールに入力できる方法の詳細については:

console.log(Ext.ComponentQuery.query("treelist")[0]); 

少なくともChromeはあなたが例えば参照してくださいすべてのプロパティをナビゲートできるコンポーネントを返します彼らがどのような設定を使用したかなど。

関連するCSSについては、DOMツリーをナビゲートし、関連するCSS情報をプロジェクトにCSSタブからコピーすることができます。

.x-treelist-navigation { 
    background-color: #32404e; 
    background-position-x: 44px; 
    padding: 0 0 0 0; 
} 
... 
関連する問題