Extjs4快速上手四實現選單

原文

這幾天狀態不佳，雜事太多有些煩心，這一次就少講點吧。

本次將主要講extjs樹形選單的實現。在很多系統裡邊，樹形選單被廣泛應用，主要因為其有清晰的層次結構。記得最早見到的樹形選單是通過實現的，非常簡單。之後用c#的現成控制項拖拽了乙個，當時還沾沾自喜。再後來在學習師兄的乙個通用後台** 時，看到了梅花雪，當時感覺太強大了，每個節點都可以存在資料庫，並且能夠進行自定義。之後接觸到一些ui庫之後，更是見到了更強大的樹形選單。

或許實現乙個簡單的樹形選單對於不少人並非難事，但是想要實現乙個功能比較完善的確要花不少功夫。好在目前有很多現成的供我們使用，而extjs也提供了功能豐富的樹形選單。本次我們就來講最簡單的一種：ext.tree.panel。

正如之前講到的，我們在實現乙個extjs元件時，應該按照如下的步驟：

以下就是各部分的**實現：

//modelext.define('et.model.menu', );

//或許你看到這些欄位和下邊json資料並不對應，這個並不重要，這裡邊有幾個是我自己拓展的，只是沒用到，只要幾個關鍵的字段設定即可，下邊會有介紹。

//storeext.define('et.store.menus',
} });

//viewext.define('et.view.menu',); 
this
.callparent(arguments); 
} });

//controllerext.define('et.controller.menu',
});},
loadmenu:
function
(selmodel, record)
win.show();
}else
;                    
this.opentab(panel,record.get('url')); 
}else
}}  },
opentab : 
function
(panel,id) 
else
if(typeof panel!="string")  
}  });

ext.loader.setconfig();

name:'et',

autocreateviewport: true,]

});

[
]},,,]
}]

其中我們可以看到，text指定了結點名，cls指定了圖示樣式（如folder為資料夾圖示，file為檔案圖示），leaf指定是否為葉子結點，children內巢狀子結點。其他幾個均為自定義，如這裡url來指定開啟panel的別名。

最後討論一下json的生成，對於靈活性比較高的系統（如許可權管理），一般把每個選單項存在資料庫比較方便，可根據情況組合後拼接json返回前台。但是很多時候我們或許並不需要這麼高的靈活度，例如每個角色選單固定，那麼這是我們可以考慮按照如上json格式將每個選單寫進乙個json檔案，在使用者登陸時判斷角色載入對應檔案即可。這樣做能夠省不少事（但要注意防止使用者直接開啟json檔案路徑，來越權操作功能，所以後台最好在***裡再進行下判斷）。

**在見上一遍最後。

Extjs4快速上手四實現選單

ExtJs4 問題總結

學習Extjs4心得

ExtJs4 基礎必備

Extjs4快速上手四 實現選單

ExtJs4 問題總結

學習Extjs4心得

ExtJs4 基礎必備

相關推薦

Extjs4快速上手四實現選單