私は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
}));
}
}
}
},
コードを共有できますか?そうでない場合は、[SSCCE](http://sscce.org/)JSfiddleを作成できますか? – Mo3z
申し訳ありませんが、今すぐコメントしました。まもなく私はコードを追加しますが、それは助けになるとは思いません - 私は例で見たことを正確に行いました。ありがとう。 – Gena
実際には動作しますが、セットアップに何か問題があると確信しています。タグを変更する必要はありません。これは多くのことを破ります。 – xamiro