2016-12-18 9 views
0

私はDojoで全く新しい初心者です。私の質問はあまりにも明白かもしれません。ごめんなさい。 DBから選択された行に基づいてMenuBarを含む複雑なメニューをプログラムで作成しました。 最終的なアイテムとサブメニューアイテムのアライメントが異なります。 How it looks likeすべてのサブメニューは、主に同じ行に表示されました。 MenuSeparatorを追加するだけで、私はそれらを分割することができました。 私は迷っています。私はインターネット上の例を見つけました。それは、私が必要とするもの(サブメニュー用の右矢印を含む)を正確に示しています。Example。私はまったく同じアルゴリズムを使ってメニューを作成しました。しかし、私は同じ結果を得ることはできません。 お願いします。PopupMenuBarItem内の項目の整列


私は画像にアクセスできないことに注意しました。インデントは、サブメニューの幅に依存

    Final 1 
       Final 2 
       Final 3 
     DropDown 1 
     DropDown 2 

:ように見える純粋なテキストで 。


私は今何が起こったのか知っています(それを回避する方法はわかりません)。 問題はウィジェットのレンダリングです。 最終的なメニューオプション(リーフ)は、テーブル行(trおよびtdタグ)としてレンダリングされます。 PopupMenuItemは、行の間にdiv としてレンダリングされます。 もう一度、私はそれを避けるための手がかりはありません。


ここにコードがあります。いくつかのノート:

1.The rows is the two dimensional array 
    2.The rows with ParentID=0 are the MenuBarItems 
    3.pM is the MenuBar widget 

    createMenu: function (rows, pM) { 

    var me = this; // for references from the event handlers, where 'this' means event origin (instead of lang.hitch) 
    // First define the indexes of the DB fields 
    var xMenu_Id; 
    var xMenu_Title; 
    var xParent; 
    var xURL; 
    var xUser_Roles; 
    var i; 
    for (i = 0; i < rows[0].length; i++) { 
     switch (rows[0][i]) { 
      case 'Menu_Id': 
       xMenu_Id = i; 
       break; 
      case 'Menu_Title': 
       xMenu_Title = i; 
       break; 
      case 'Parent': 
       xParent = i; 
       break; 
      case 'URL': 
       xURL = i; 
       break; 
      case 'User_Roles': 
       xUser_Roles = i; 
       break; 
     } 
    } 
    // Define the function to filter the menu rows 
    // Parameters: r - two-dimentional rows array 
    //    p - criterion (the parent menu ID) 
    //    idx - index of needed field 
    //    f - returned filtered array (no need to use in calling statement) 
    var filterArray = function (r, p, idx, f) { 
     f = dojo.filter(r, function (item) { 
      return item[idx] == p; 
     }); 

     return f; 
    } 
    // Define the recurcive function to create the sub menu tree for Menu bar item 
    // Parameters: parentMenu - the menu to add childs 
    //    parentID - the ID of parent menu to select direct children 
    //    role  - current user role 
    var subMenuFactory = function (parentMenu, parentID, role) { 
     var i; 
     var fa = filterArray(rows, parentID, xParent); 
     var sub; 

     for (i = 0; i < fa.length; i++) { 
      if (fa[i][xUser_Roles].indexOf(role) >= 0 || fa[i][xUser_Roles] == 'all') { 
       if (fa[i][xURL] != '0') { // leaf 
        url = fa[i][xURL]; 
        parentMenu.addChild(new MenuItem({ 
         dir: 'ltr', 
         label: fa[i][xMenu_Title], 
         action: fa[i][xURL], 
         onClick: function() { me.menuAction(this.action); } 
        })); 
       } 
       else { // DropDown Node 
        sub = new DropDownMenu({ dir: 'ltr' }); 
        subMenuFactory(sub, fa[i][xMenu_Id], role); 
        parentMenu.addChild(new MenuSeparator({})); 
        parentMenu.addChild(new PopupMenuBarItem({ 
         dir: 'ltr', 
         label: fa[i][xMenu_Title], 
         popup: sub 
        })); 
       } 
      } 
     } 
    } 
    // Get array of Menu bar items 

    var filtered = filterArray(rows, 0, xParent); 
    var pSub; 
    var user_Role = this.user.Role; 
    for (i = 0; i < filtered.length; i++) { 
     if (filtered[i][xUser_Roles].indexOf(user_Role) >= 0 || filtered[i][xUser_Roles]=='all') { 
      if (filtered[i][xURL] != '0') // leaf 
      { 
       pM.addChild(new MenuBarItem({ 
        dir: 'ltr', 
        label: filtered[i][xMenu_Title], 
        action: filtered[i][xURL], 
        onClick: function() { me.menuAction(this.action); } 
       })); 
      } 
      else { // DropDown Node 
       pSub = new DropDownMenu({ dir: 'ltr' }); 
       subMenuFactory(pSub, filtered[i][xMenu_Id],user_Role); 
       pM.addChild(new PopupMenuBarItem({ 
        dir: 'ltr', 
        label: filtered[i][xMenu_Title], 
        popup: pSub 
       })); 
      } 
     } 
    } 


}, 
+0

コードを共有できますか?そうでない場合は、[SSCCE](http://sscce.org/)JSfiddleを作成できますか? – Mo3z

+0

申し訳ありませんが、今すぐコメントしました。まもなく私はコードを追加しますが、それは助けになるとは思いません - 私は例で見たことを正確に行いました。ありがとう。 – Gena

+0

実際には動作しますが、セットアップに何か問題があると確信しています。タグを変更する必要はありません。これは多くのことを破ります。 – xamiro

答えて

0

私は問題が見つかりました。必要な配列の定義で、私は誤ってPopupMenuをインポートするbar PopupMenuItemの代わりにItemをインポートします。関数では、このパラメータの名前はright-PopupMenuItemですが、明らかにそれは多くの助けになりませんでした...

私を助けようとした皆様に感謝します。

よろしくお願いします。 Gena

関連する問題