2

動的に作成する必要があるパネルにメニュー システムを設定しています。クライアントが好む静的メニューのモックを作成しましたが、メニュー カテゴリとアイテムはストアから JSON 経由でロードする必要があります。

静的に設定された最初のいくつかのメニュー項目については、次のとおりです。

Ext.define('SimpleSearch.view.FacetSDL' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.facetsdl',  //alias is referenced in MasterList.js
requires: ['SimpleSearch.store.SDLResults', 'FacetData' ],
title: 'Facet Search',
html: null,
frame: true,
layouts: 'fit',

items: [
  {
    id: 'group-menu',
    title: 'Browse',
    xtype: 'menu',
    plain: true,
    floating: false, 
    layouts: 'fit',
    items: [
      {
        text: 'Security',
        listeners:
          {
            click: function() { 
                     var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
                     groupmenu.hide() 
                     var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
                     securitymenu.setPosition(0,-groupmenu.getHeight(),false);
                     securitymenu.show()
                   }
          },
        menu: {        // <-- submenu by nested config object
          items: [
            {
              text: 'Classification',
              listeners:
              {
                click: function() { 
                     var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
                     groupmenu.hide() 
                     var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
                     var classificationmenu = Ext.ComponentQuery.query('#classification-menu')[0];
                     classificationmenu.setPosition(0,-groupmenu.getHeight() - securitymenu.getHeight(),false);
                     classificationmenu.show()
                }

必要なデータをすべてロードするクラスを作成し、そのクラスを「items」フィールドに対して反復処理する方法があるのではないかと考えていましたが、それが機能するかどうかはわかりません。

4

3 に答える 3

0

Tree と TreeStore の使用を検討する必要があります。次に、ui:'menu'またはviewConfig { ui: 'menu' }config プロパティを使用して、通常のツリーと区別します。次に、クライアントが望むようにスタイルを設定します。

このようにして、データとすべてのサブメニューを動的に処理するためのすべてのメカニズムを自由に配置できます。CSS 側で少し工夫するだけで済みます。

于 2012-10-16T15:06:36.153 に答える