树形菜单是管理系统必备的控件之一,extjs中的树形菜单非常强大,使用也非常方便,基本满足了我们开发的所有需求。基本上成为了标配,下面本文将使用Sencha Architect来制作一个简单的treepanel菜单。
1.打开Sencha Architect新建一个ext js 4.1.x工程,保存到我们之前创建的ssh工程里面去,方便我们使用tomcat进行调试。
也可以创建一个简单的web工程,如果想使用ssh框架的可以参考我之前写的文章,只要能正常运行就行。建议还是用ssh吧,新手都倒腾一下有好处的。
2.拖动一个treepanel到设计窗体中,如下图
在project inspector视图中我们可以看到在views节点将会多了一个mytreepanel的控件如下图
修改菜单栏的标题
鼠标左键选中mytreepanel,然后在config面板的查找编辑框输入title(也可以不输入慢慢找...)
这时候可以看到treepanel的标题变成我们输入的东西。
3.创建一个数据源store,在extjs4.x中的treepanel支持tree store,所以我们在添加一个tree store到design中,如图所示
这时同样会在我们的project inspector窗口中看到我们的stroes节点多了一个MyJsonTreeStore的数据源。如下图,MyJsonTreeStore会有一个红色包围的感叹号,这是因为我们有些属性没有配置好,点击可以查看详细的信息。
接下来我们配置一下MyJsonTreeStore的属性。
1)配置url属性为http://localhost:8080/ssh/treepanel.json
2)在WebRoot中创建treepanel.json文件,内容如下
[
{ "text": "parent1", "expanded": true, "children": [
{ "id":1 ,"type":1, "text": "menu1", "leaf": true },
{ "id":2 ,"type":2, "text": "menu2", "leaf": true}
] }
]
这里配置了树形视图的数据,一个父节点和两个子节点,text是显示的内容
3)fields属性
完成后如下图
3)配置root
在编辑区输入
{
expanded: true
}
保存即可,然后我们再配置多两个属性即可
4.设置mytreepanel的数据源为myjsontreestore即可
4.保存整个工程,在工具栏按save即可,然后我们重新启动tomcat,在浏览器输入http://localhost:8080/ssh/treepanel/app.html就可以看到效果了